jQueryを使いクリックする代わりにEnterキーを押す
HTMLのformにあるsubmitボタンはEnterキーを押すとクリックしたことになるのですが、JavaScriptで制御している場合はEnterキーが効きません。
jQueryを使ってEnterキーを押すとボタンをクリックしたことになる仕組みを考えます。
次のようにテキストボックスとボタンが一つずつあるとします。
カーソルがテキストボックスにあるときだけ、Enterキーを押すと反応するようにします。
HTML
<input type="text" id="mytextbox">
<input type="button" id="mybutton" value="実行">
<input type="button" id="mybutton" value="実行">
JavaScript
$("#mybutton").click(function() {
//処理を記載。
alert($("#mytextbox").val());
});
$("#mytextbox").keypress(function(e){
if(e.which == 13){
$("#mybutton").click();
}
});
//処理を記載。
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()">
<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();
}
}
alert(document.getElementById("mytextbox").value);
}
function keydown_enter() {
if(window.event.keyCode == 13) {
document.getElementById("mybutton").click();
}
}
[ 2015年11月17日 | カテゴリー: JavaScript | タグ: tips ]
« 蒙古タンメン中本 町田店 | 元の市町村に東西南北が付く別の市町村 »
コメントを残す