Enterキーでクリック時の動作を呼び出す

なにかの要素をクリックしたときに動作するようなスクリプトで、Enterキーでも動作がするようにする方法のメモです。jQueryを使っています。

a要素やbutton要素のように最初からクリックすることが想定されている要素の場合、大抵のブラウザではEnterキーを押すことでクリックイベントが発火するので、問題ありません。

しかし、普通の要素(たとえばspan要素)はEnterキーを押してもクリックしたことにはなりません。

キーボードをメインに使っている人や、マウスが壊れてキーボード操作しかできない人もいるでしょうから、キー操作ができないのは問題ですね。

$(element).attr("tabindex", "0");

まずクリック操作を想定する要素にtabindex属性を付けます。これで、tabキーでフォーカスが当たるようにします。

$(element).on("click keydown", function(e) {
	if(typeof e.keyCode === "undefined" || e.keyCode === 13) {
		/* なんらかの動作 */
	}
});

jQueryの.on()はイベント名をスペース区切りで複数指定できます。イベントオブジェクトのkeyCodeで、なんのキーが押されたかがわかります。13はEnterキーのキーコードです。

また、.trigger()を使って次のようにも書けます。

$(element).on("click", function(e) {
	/* なんらかの動作 */
});

$(element).on("keydown", function(e) {
	if(e.keyCode === 13) {
		$(this).trigger("click");
	}
});

こうすると、Enterキーでクリックイベントが呼ばれます。プラグインを後から改造する場合などに便利です。

Comments