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

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

</p>
<p>&lt;form class=&quot;form-inline&quot; role=&quot;form&quot;&gt;</p>
<p>&lt;div class=&quot;form-group&quot;&gt;<br />
    &lt;input class=&quot;form-control&quot; id=&quot;yy&quot; type=&quot;text&quot;&gt;<br />
    &lt;label for=&quot;yy&quot;&gt;年&lt;/label&gt;<br />
    &lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot; id=&quot;run&quot;&gt;実行&lt;/button&gt;<br />
  &lt;/div&gt;</p>
<p>&lt;/form&gt;</p>
<p>

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

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

Enter キー押下 = Submit

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

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

<br />
$(&quot;input&quot;). keydown(function(e) {<br />
  if ((e.which &amp;&amp; e.which === 13) || (e.keyCode &amp;&amp; e.keyCode === 13)) {<br />
    return false;<br />
  } else {<br />
    return true;<br />
  }<br />
});<br />

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

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

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

数値を入力 → Enter キー押下

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

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

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

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

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

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