フォームを作成する際、ユーザーが入力ボックスで Enter キーを押すとフォームが自動的に送信されるという状況に遭遇することがよくありますが、誤操作や情報損失などの問題が発生しやすくなります。
この記事では、ユーザーのニーズに応えるために、フォームを送信せずに Enter キーを押す方法と、PHP でフォームを送信する 2 つの方法を実装する方法を紹介します。
1. フォームを送信せずに入力します
1. JavaScript を使用して達成します
JavaScript を使用して、ユーザーがボタンを押したときにフォームが自動的に送信されないようにすることができます。サーバーへのキーを入力します。コードは次のとおりです:
<script> document.onkeydown = function(event) { var e = event ? event : (window.event ? window.event : null); if (e.keyCode == 13 && e.target.tagName.toLowerCase() != 'textarea') { //阻止表单提交 return false; } } </script>
2. jQuery を使用して
を実装する さらに、jQuery のPreventDefault() メソッドを使用してフォームの送信を防ぐこともできます。コードは次のとおりです:
<script> $(document).on('keydown', function(event) { if (event.keyCode == 13 && event.target.tagName.toLowerCase() != 'textarea') { event.preventDefault(); } }); </script>
2. Enter キーを押してフォームを送信します
ユーザーが入力後に Enter キーを押してフォームを自動的に送信するようにしたい場合は、これは 2 つの方法で実現されます。
1. JavaScript を使用して実装します
テキスト ボックス内の Enter キーのイベントをリッスンし、ユーザーが Enter キーを押したときにフォーム送信イベントをトリガーできます。コードは次のとおりです。
<script> function submitForm() { document.formName.submit(); //提交表单 } document.getElementById('input').onkeydown = function(event) { var e = event ? event : (window.event ? window.event : null); if (e.keyCode == 13) { submitForm(); } } </script>
2. HTML5 の form 属性を使用する
HTML5 では、form 属性を使用して入力ボックスをフォームにバインドできるため、ユーザーが Enter キーを押したときに、入力ボックスに入力すると、フォームが自動的に送信されます。コードは次のとおりです。
<form action="submit.php" method="post"> <input type="text" id="input" name="input" form="myform" /> <button type="submit" form="myform">提交</button> </form>
この例では、入力ボックスの form 属性はフォーム ID を指し、送信ボタンの form 属性もフォーム ID を指します。このようにして、ユーザーが Enter キーを押すと、入力ボックスの内容がサーバーに送信されます。
概要
Web フォームを作成するときは、ユーザーの行動習慣を考慮する必要があり、ユーザー エクスペリエンスを向上させる必要があります。この記事では、フォームを送信せずに Enter キーを押す方法と、PHP で Enter キーを押してフォームを送信する 2 つの方法を実装する方法を紹介します。この記事が少しでもお役に立てれば幸いです。
以上がフォームを送信せずにEnterキーを押し、PHPでフォームを送信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。