EnterキーによりSubmitされるのを防ぐ方法

Bootstrapを使用して、次のような簡単なフォームを作成した。


<form class="form-inline" role="form">

<div class="form-group">
    <input class="form-control" id="yy" type="text">
    <label for="yy">年</label>
    <button type="button" class="btn btn-success" id="run">実行</button>
  </div>

</form>

ここで想定外の問題発生。
入力フィールドに、数値(年)を入力して Enter キーを押すと
何事も起きていないのに、入力値がスーッと消えてしまうのです。

先ずは。Bootstrap を疑ってググって色々調べてみると、Bootstrapとは無関係
で、原因はブラウザのデフォルト動作で

Enter キー押下 = Submit

になり、送信データを受信するプログラムがないためらしい。

受信用のプログラムがないので、対策として、以下のように Enter キーを無効に
することで暫定対策。

$("input"). keydown(function(e) {
  if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
    return false;
  } else {
    return true;
  }
});

これだと、Enter キーを無効にはできるが、

数値を入力 → 右手をマウスに持ち換え → ボタンをクリック

との一連の動作が、如何にも面倒。

数値を入力 → Enter キー押下

とできれば、入力がかなり改善される。
と言うことで、Enter キーを無効にすることをやめて
次のようなコードに変更。

$("#yy").keydown(function(e){
  if(e.keyCode=='13'){
    var year = $("#yy").val();
    dispData(year);  // データ表示
  }
});

ここで、またまた問題が・・・・
データは、一瞬表示されるが直ぐに消えてしまうような現象が発生。

これは、「Enter キー」のSubmit 機能が活きているため、データを
一旦表示した後に、フォームが送信されてしまうことが原因。
(この原因を掴むのに、随分苦労しました。)

送信機能を無効にするため、最後に、false を返す一文を
するだけで、上の問題が解決できました。

$("#yy").keydown(function(e){
  if(e.keyCode=='13'){
    var year = $("#yy").val();
    dispData(year);  // データ表示
    return false;    // Submitを無効に
  }
});