トップ > Tech > JavaScript > Enterでsubmitさせないようにする

Enterでsubmitさせないようにする

経緯
対応
参考

経緯

<form>
  <input type="text" id="textbox1" name="textbox1"/>
  <input type="text" id="textbox2" name="textbox2"/>
  <input type="button" value="GO!" id="submit_button"/>
</form>

上のようなフォームのテキストボックスにおいてテキストボックス上で Enter キーを押すと form の submit が呼ばれてしまうブラウザがある（FF, IE は発生しない、Chrome は発生した）。ブラウザごとに動作が違うのが気に入らないし、JavaScript でボタンのイベントをハンドルしているときは勝手な動作をしてほしくない。

というわけでこれをキャンセルする方法を記す。

▲ ▼

対応

すべてのテキストボックス上で Enter キーが押されたときにキャンセルするようにつくる。具体的には onkeypress イベントで Enter のキーコード 13 をはじいてやればよい。ソースコードを示す。

window.onload = function()
{
  $("textbox1").onkeypress = onTextBoxKeyPress;
  $("textbox2").onkeypress = onTextBoxKeyPress;
  $("submit_button").onclick = onSubmitButtonClick;
}

function onTextBoxKeyPress(e)
{
  e = e || window.event;
  if (e.keyCode == 13){
    onSubmitButtonClick();
    return false;
  }
}

function onSubmitButtonClick()
{
  // なんか送信する
}

onTextBoxKeyPress メソッドが前述の部分である。リスナの引数に e があるのはクロスブラウザ対応のためである（テキストボックスに英数字しか入力できないようにする参照）。キーコードが 13 であれば、false を返す。これによりブラウザが勝手に submit してしまうのを防ぐことができる。

なおこの例では、送信ボタンと同じメソッドを呼び出し、Enter キーによって所望の submit 動作ができるように実装している。単に送信しないだけでよければ、この 12 行目は省けばよい。

▲ ▼