【HTML】Enterキーが無効化できない場合の確認ポイント

はじめに

「フォーム処理で扱うEnterキーを無効にしたい」と思い、

そこで フォーム処理にて「Enter」キーを無効化させるために、

• type=submit を type=button に変更する。
• js側でkeyCodeを指定してEnterキーを無効化する。

などをいくつか試してみたりしたが無効化できず、 色々調べているうちに思いもよらない対処方法だったので備忘として掲載。

目的

• フォーム処理におけるEnterキーを無効化したい

対処

ダミーとなるテキストフィールドを用意する

Enterキーを無効にする方法 という記事で、

formタグ内のテキストフィールドなどが1つしかない場合において

<form name="form" action="test.html">
    <input type="text" name="text" />
    <input type="button" onclick="submit();" value="送信" />
</form>

• type=submit を type=button に変更する。
• js側でkeyCodeを指定してEnterキーを無効化する。

のような制御を加えても「Enter」キーが無効化されず送信されてしまうことがあるらしい... そこで、formタグ内のテキストフィールドを追加すれば上記の制御が効くらしいので、

通常のテキストフィールドとは別に、
display:none;を加えたダミーのテキストフィールドを追加してみたら

<form name="form" action="test.html">
    <input type="text" name="text" />
    <input type="text" name="dummy" style="display:none;">
    <input type="button" onclick="submit();" value="送信" />
</form>

通常の「Enter」キー制御type="button"が効くようになり、無効化できた😲!

まとめ

• 「Enter」キーを無効化したい場合は、テキストフィールドが2つ以上であるかを確認する。

参考

• Enterキーを無効にする方法
  @mimoe さん、ありがとうございます🙏