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

主に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

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

関連記事

ASP.NET Core: ファイルアップロードの考察

ASP.Net Core(3.1)を使ったファイルアップロードに関する考察です。 元ネタはマイクロソフトのサイトですが、記載内容が私には難しかったり、業務で使用するために悩む部分があったので独自に纏め …

slf4jで独自ログ項目を追加(MDC)

業務要件、障害発生時の処理追跡や証跡等、ログ出力に特定項目を含めたい場合があります。 共通のログ出力ユーティリティやライブラリを作って、その中でログ出力内容を変更しても良いのですが、MDC(Mappe …

OfficeアプリのコントロールはPowerShellかVBAか?

Windowsサーバの監視のお仕事での話です。 月次で各サーバのパフォーマンスモニタのログファイル(.blg)が送られてきます。このデータ群から、各種のグラフや表を作成して、PowerPointでそれ …

開発環境のJBoss EAP7にリモートアクセス

開発中のものを他者に見せたり、問題が発生している開発者の開発物を参照するために、eclipse上で起動しているEAP7のWebアプリに別のPCからアクセスしたい場合があります。 このための手順を記載し …

EAP7のインストールとパッチ適用

仕事でredhat社のEnterprise Application Server7(EAP7)を扱うことが多いので備忘録として記載します。 なお、このサイトでWebアプリを公開したいと考えていますが、 …

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