アプリ開発ときどきアウトドア

主にJavaを使ったアプリ開発やトラブルシューティング等のノウハウ、キャンプや登山の紹介や体験談など。

1. システムエンジニアリング html/jquery 実装技術

jQueryによるデフォルトボタンの実装

投稿日:

デフォルトボタンについて

Webページ上でエンターキーを押した場合、そのページ上であらかじめ決められたボタンをクリックしたかのように処理を実行する仕組みがある。何らかのデータの検索を行うようなページは、このような仕組みが用意される場合が多い。検索条件欄に条件を入力し、検索ボタンを押さずにそのままエンターキーを押すと、検索結果が表示されるようなケースである。キーボードからの入力後に、マウス操作をせずにボタンをクリックできるので、効率的な操作が実現できる。
このようにページ上でエンターキーを押した場合に実行されるボタンや、その仕組みをデフォルトボタンと呼ぶ。

ブラウザの既定の動作として、HTML(fomr)上の最初のsubmitボタンがデフォルトボタンになります。この辺の詳細はHTML5仕様(“4.10.22.2 Implicit submission”)を参照のこと。

実際の業務アプリ開発では、ちょっとこの仕様では耐えられないので、デフォルトボタンの仕組みを実現するjavascript関数を作成しました。

想定する要件

想定する要件は次の通りです。
bootstrapのボタンやモーダルを想定しています。(btn-primary, modal等)

  • 所定のCSSクラスを指定するだけで、リンクやボタン要素をデフォルトボタンにできること。モーダルのボタンもデフォルトボタンにできること。
  • モーダルが表示された状態でエンターキーが押された場合、モーダル上のデフォルトボタンが実行されること。複数のモーダルが含まれるページの場合、表示されているモーダルのデフォルトボタンが実行されること。
  • テキストエリア(“<textarea>”)では正常に改行を入力できること。
  • デフォルトボタンがクリックできない場合は、処理を中止すること。

ソースコード

各ページや共通のjsファイルに下記を追加してください。
ページ上のキー入力に、この関数が実行されます。

説明のためにコメントを冗長に記載しています。実際に使用する際は、コメントやログ出力(console.log)を削除してください。
なお、この実装だけだとエンターキー連打時に何度もクリックが実行されてしまいます。業務アプリではダブルクリック防止を実装していると思うので、それと併せてエンターキー連打が実行されないよう修正してください。(「ダブルクリック時に有効になる条件」を追加したり、デフォルトボタンが押せる/押せないのチェック時(37行目)に追加する、等。)

// デフォルトボタンの設定
const MODAL_SEL = ".modal"; // モーダル要素セレクタ(非表示/非表示要素)
const DEFAULT_BTN_SEL = ".btn-primary"; // デフォルトボタンセレクタ
$(window).keypress(function(e){
	
	// ページ上の任意項目の入力時(1字単位)で実行されるため、
	// 軽くて可能性の高い条件を先に判定する。
	
	// 改行コード以外は無視
	if(event.keyCode != 13 ){
		return;
	}

	// テキストエリアの場合は改行を意味しているので、ここでは何もしない。
	// (結果としてブラウザの既定動作である改行入力になる。)
	if ($(":focus").is("textarea") ){
		console.log("no click(textarea)");
		return;
	}
	
	// モーダルが表示されている場合はモーダル上のデフォルトボタン、
	// モーダルが非表示の場合は、モーダル外のデフォルトボタンをクリック対象とする。
	// 非表示のボタン("display: none;")は対象外とします。
	var $btns = $(MODAL_SEL + ":visible").find(DEFAULT_BTN_SEL + ":visible");
	if( $btns.length <= 0){
		var $modalBtns = $(MODAL_SEL).find(DEFAULT_BTN_SEL);
		var $allBtns = $(DEFAULT_BTN_SEL);
		var $btns = $($allBtns).not($modalBtns).filter(":visible");
	}
	if( $btns.length <= 0 ){
		console.log("no click(no target)");
		return;
	}

	// 対象のリンクやボタンが無効な場合は中止
	var $btn = $btns.get(0);
	if( $btns.css("pointer-events") == "none" || $btns.is(":disabled")){
		console.log("no click(disabled)");
		return;
	}

	// 別ボタンがクリックされないよう既定動作を中止
	e.preventDefault();

	console.log("click button: id=" + $btn.id);
	$btn.click();

});


(adsbygoogle = window.adsbygoogle || []).push({});


(adsbygoogle = window.adsbygoogle || []).push({});

-1. システムエンジニアリング, html/jquery, 実装技術

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Wildfly11のインストール

このサイトでWebアプリを公開したい。 仕事ではJBoss Enterprise Application Server(JBoss EAP)を使う機会が多いのでそれを使いたいがライセンス料がかかる。無 …

Javaでサポートする暗号化アルゴリズム

Java暗号化アーキテクチャ Javaで暗号化処理を実装する場合、Java暗号化アーキテクチャ(Java Cryptography Architecture: JCA)と呼ばれるフレームワークを使いま …

Webアプリ用のサイトマップ生成

Googleの検索結果への表示を促進するためにGoogleに対してサイトマップを提供する必要がある。 WordPressでは様々なプラグインを使ってサイトマップを作成できるが、Webアプリの場合は独自 …

DOSバッチリファレンス

ちょっとした事でbatファイルを作成することが多い。 そのたびにネット検索するのが非効率なため、リファレンス化しようと思う。 そういう目的なので、自分がよく調べる項目に絞っている。 開発時の注意点 直 …

Webアプリテスト用のHTTPヘッダの追加

フロントに配置されたリバースプロキシサーバやロードバランサで設定されたHTTPヘッダを使用するWebアプリを開発することが多々あります。 このようなシナリオでは、設計に基づいて実装することはできますが …

プロフィール ゆっきーです。
都内でシステムエンジニアをやっています。
もっと詳細を見る