フロントエンド JS は、フォーム内の 1 つの入力ボックスの Enter 送信イベントを最適化します。

前提

フォームにinput入力ボックスが1 つしかない場合、フォームsubmitにボタンがなくても、入力ボックスで Enter キーを押すと、フォームの submit イベントがトリガーされます。これにより、特にユーザーがフォームの送信を予期していない場合に、予期しない動作が発生する可能性があります。

この問題を解決するには、次の 2 つの最適化方法を採用できます。

form方法 1:要素に含めない

フォームに入力ボックスが 1 つしかない場合は、入力ボックスを要素に含めるのではなく、別のdivまたは要素に配置できます。これを行うと、Enter キーによってフォーム送信イベントがトリガーされる問題を回避できます。spanform

<div>
    <p>Does not submit:</p>
    <input type="text"/>
</div>

方法 2: 非表示の入力ボックスを追加する

もう 1 つの方法は、非表示の入力ボックスをフォームに追加し、スタイルを として設定することですdisplay: none。このようにして、Enter キーが押されると、フォームの送信イベントをトリガーせずに、非表示の入力ボックスにフォーカスします。

<form id="form2" method="POST">
    <p>Does not submit:</p>
    <input type="text"/>
    <input type="text" style="display: none;" />
</form>

上記の最適化方法により、入力ボックスが 1 つしかないフォームで Enter キーがフォーム送信イベントをトリガーする問題を回避できます。これにより、ユーザー エクスペリエンスが向上し、フォームが期待どおりに動作するようになります。