jQueryでENTERキーによるSubmitを防止する
formタグ内にsubmitタグがある場合、テキストボックス内でEnterキーを押すとsubmitされてしまう。
<form id="register_form" method="post" action="/register"> <input type="text" name="username" /> <input type="text" name="age" /> <input type="submit" value="保存" /> </form>
submitされないようにjQueryで以下のように対応。
jquery-1.4.2.js
$(document).ready(function() { $("#register_form").keypress(function(ev) { if ((ev.which && ev.which === 13) || (ev.keyCode && ev.keyCode === 13)) { return false; } else { return true; } }); });
keypress は要素上でキーを押して離した直後に実行されるイベント、
keydown は要素上でキーが押された直後(キーを離す前に)実行されるイベント。
keydownイベントとkeypressイベントではevent.keyCodeで取れる値が違う場合があるので注意。
event.which と event.keyCode の両方必要なのかはちょっと調べきれず。
Enterキーについては
IE6
IE8
Firefox3.6
Chrome8
Sarari5
で確認したが event.which と event.keyCode の両方とも 13 がとれた。
参考:
数字しか書けないinputとか英単語しか書けないinputとか - とっくりばー
http://tockri.blog78.fc2.com/blog-entry-119.html
keyイベント(keypress,keyup,keydown)の確認(keyCode,charCode)
http://www.nlp.ie.niigata-u.ac.jp/~hosoya/key-event/
各ブラウザでキーコードを取得してみた【JavaScript】 - Programming Magic
http://www.programming-magic.com/20080205235859/
追記:
formタグにイベントを設定するのはまずかった。
formタグ内にテキストボックスしかない場合はよかったがテキストエリアがある場合はENTERキーによる改行ができなくなってしまう。
textareaタグは反応しないようにinputタグのみ設定するように修正。
$('input').keypress(function(ev) { if ((ev.which && ev.which === 13) || (ev.keyCode && ev.keyCode === 13)) { return false; } else { return true; } });