jQueryを使いクリックする代わりにEnterキーを押す

Pocket

HTMLのformにあるsubmitボタンはEnterキーを押すとクリックしたことになるのですが、JavaScriptで制御している場合はEnterキーが効きません。
jQueryを使ってEnterキーを押すとボタンをクリックしたことになる仕組みを考えます。
次のようにテキストボックスとボタンが一つずつあるとします。

form

カーソルがテキストボックスにあるときだけ、Enterキーを押すと反応するようにします。

HTML

<input type="text" id="mytextbox">
<input type="button" id="mybutton" value="実行">

JavaScript

$("#mybutton").click(function() {
  //処理を記載。
  alert($("#mytextbox").val());
});
$("#mytextbox").keypress(function(e){
  if(e.which == 13){
    $("#mybutton").click();
  }
});

ボタンをクリックするとテキストボックスの文字列をAlertで表示します。実際は、ここを書き換えて使います。
テキストボックスにカーソルがあるときにEnterキーを押すとボタンをクリックします。厳密に言えば「ボタンをクリックするのと同じ動作をする」です。
keypressでキーを押した場合を認識してfunctionの引数の値がどのキーが押されたかを示します。「13」はEnterキーです。

jQueryを使わない方法

蛇足ですがjQueryを使わない方法についても書いておきます。

HTML

<input type="text" id="mytextbox" onkeydown="keydown_enter();">
<input type="button" id="mybutton" value="実行" onclick="button_click()">

JavaScript

function button_click() {
  alert(document.getElementById("mytextbox").value);
}
function keydown_enter() {
  if(window.event.keyCode == 13) {
    document.getElementById("mybutton").click();
  }
}

[ 2015年11月17日 | カテゴリー: JavaScript | タグ: ]

« | »

コメントを残す

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

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報