テキストボックスでEnterキーを押してform_html/css_WEB-ITnoseを送信する実装

テキスト ボックス (入力要素) で Enter キーを押してフォーム (フォーム) を送信したい場合がありますが、それを望まない場合もあります。たとえば、検索動作の場合、キーワードを入力した後に Enter キーを直接押してフォームをすぐに送信する必要がある場合、一部の複雑なフォームでは、フォームへの入力を完了する前に誤って Enter キーを押してフォームの送信をトリガーすることを避けたい場合があります。 。

これらの動作を制御するために、ブラウザーはすでにこれを行っています:

フォームに type="submit" のボタンがある場合、Enter キーを押します。キーが有効になります。

フォーム内に type="text" の入力が 1 つだけある場合は、ボタンの種類に関係なく、Enter キーが有効になります。

ボタンが input ではなく button で、タイプが追加されない場合、デフォルトは IE では type=button、FX では type=submit です。

textarea や select などの他のフォーム要素は影響を受けず、ラジオ チェックボックスはトリガー ルールに影響を与えませんが、FX では Enter キーに反応しますが、IE では反応しません。

type="image" の入力は type="submit" と同じ効果を持ちます。なぜそのようなタイプが設計されているのかわかりません。背景画像を追加するのには CSS を使用する方が適切です。 。

実際のアプリケーションでは、フォームに type="submit" のボタンがあることを確認するだけで、フォームを Enter キーに応答させるのは簡単です。また、テキスト ボックスが 1 つしかなく、Enter キーに応答したくない場合はどうすればよいでしょうか?私の方法は少しぎこちなく、意味のないテキスト ボックスをもう 1 つ作成して非表示にします。ルール 3 に従って、ボタンを使用するときは、一貫したブラウザーのパフォーマンスを確保するためにタイプを明示的に宣言するようにしてください。

いくつかの例をリストしたデモを作成しました。

コードボックスを実行します

< html> ;




< ;body>

このデモは、テキスト ボックスで Enter キーを押すとフォーム送信がトリガーされるかどうかを示します

デフォルトでは、テキスト ボックスが開かれると、テキスト ボックスが開かれるかどうかに関係なく、フォームが送信されます。ボタンの種類は submit または button

非表示のテキスト ボックスを追加してテキスト ボックスの送信を回避する方法

送信タイプのボタンがある限り、1 つのテキスト ボックスまたは複数のテキスト ボックスが送信されます

タイプがある限りsubmit ボタンは、1 つのテキスト ボックスまたは複数のテキスト ボックスを送信するかどうかに関係なく存在します

< ;input type="text">

複数のテキスト ボックスがある場合は、送信せずに type を使用してくださいasボタン ボタンをクリックするだけ

button 要素を使用する場合、FX と IE ではパフォーマンスが異なります

<ボタン>送信
< form>

radio と checkbox も FX ではフォーム送信をトリガーしますが、IE

image タイプのボタンは、submit< /h2>
<タイプの効果と同等です。 ;form action="http://www.koubei.com">