Web制作メモ -トップへ-

[jQuery] inputのenterキーを無効にする

JavaScript2015.03.03 14:50

inputはenterキーが押されるとフォームを送信します。

inputが一つの場合はあまり気になりませんが、inputやtextareaが複数あるフォームの場合、誤入力で意図せず送信されることがあり使い勝手がよくありません。

そのような場合はinputのenterキーを無効にします。

inputでキーが押された場合、keypressイベントが発生し、コールバック関数の引数でイベントオブジェクトを受け取れます。

イベントオブジェクトではwhichまたはkeyCodeでキーコードを取得できます。

enterキーのキーコードは13です。

whichとkeyCodeはどちらもキーコードのプロパティですが、ブラウザによってどちらか一方しか使っていないブラウザがある為、両方で確認します。

inputのenterキーを無効にする

$('input[type="text"]').keypress(function(e){
    if((e.which == 13) || (e.keyCode == 13)){ return false; }
});

サンプル