Enterキーによるフォーム送信処理方法-jsチュートリアル-php.cn

Enterキーによるフォーム送信処理方法

巴扎黑

リリース： 2016-11-25 14:29:47

オリジナル

1358 人が閲覧しました

1. フォーム内にが 1 つだけある場合は、Enter キーを押すとフォームが自動的に送信されます。

Html コード

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>  
<input type=&#39;text&#39; name=&#39;name&#39; />  
</form>

ログイン後にコピー

別のを追加します。Enter キーを押しても自動的には送信されませんが、ページ上に理解できない入力ボックスが表示されるのは厄介です。後でインターネットで検索しました。 :

1; を追加し、Enter キーを押すと送信されません:

Html コード

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>  
<input type=&#39;text&#39; name=&#39;name&#39; />  
<input style=&#39;display:none&#39; />  
</form>

ログイン後にコピー

2; onkeydown イベントを追加すると、復帰後に表示されなくなります:

HTML コード

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>  
<input type=&#39;text&#39; name=&#39;name&#39; onkeydown=&#39;if(event.keyCode==13) return false;&#39;/>  
</form>

ログイン後にコピー

復帰イベントを追加したい場合は、onkeydown イベントに判定送信フォームを追加できます:

Html コード

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>  
<input style=&#39;display:none&#39; />  
<input type=&#39;text&#39; name=&#39;name&#39; onkeydown="onKeyQuery(event);" />  
</form>

ログイン後にコピー

Js コード

//回车查询  
   function onKeyQuery(e){  
       if(window.event) // IE  
       {  
           keynum = e.keyCode  
       }  
       else if(e.which) // Netscape/Firefox/Opera  
       {  
           keynum = e.which  
       }  
       if(keynum == 13){  //等于13代表 回车键  
           //具体处理在这里  
       }  
   }

ログイン後にコピー

テキストボックス (input 要素) で 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 を使用する方が適切です。