【原】Enterキーフォーム自動提出問題

最近システムを作り、フロントエンドを再構築し、jquery validateプラグインを採用してフォーム検証を行いました.すべてが順調に進んでいる.しかし、気持ち悪いことが起こり、検証メカニズムを組み合わせるために、ポップアップボックスの検索条件ページにもformラベルが使われ、フォーム検証の便利さのためだけになった.しかし、クエリー条件(textテキスト入力ボックス)が1つしかない場合、入力条件がenterキーを押すとページがすぐにジャンプし、ジャンプの経路がおかしいことに気づき、404エラーが発生します.
直感的に、enterキーがフォームのコミットをトリガーしたのは言うまでもありません.しかし、現在の業務のようなフォームは、検証を容易にするだけで、バックグラウンドと通信するわけではありません.検索したところ、次のような質問がありました.
 
自動コミットの場合、2つの可能性があります.1つはjavascriptコードを記述し、ユーザーがEnterキーを押すとjsイベントリスニングメカニズムによってフォームのコミットをトリガーします.二、ブラウザのデフォルト動作を利用した(少なくともieはそうであることが分かった).ブラウザでは、Webページを解析するときにデフォルトの動作がたくさんあります.たとえば、1つのページにフォームとコミットボタンがある場合、ページを開くと、このコミットボタンの上にフォーカスが自動的に落ちます.同様に、1つのフォームに1つの単行テキスト入力ドメイン(text)しかない場合、この入力ドメインでEnterキーを押すと、ブラウザは自動的にフォームをコミットします.
私たちは第1の状況について一般的に知っていて理解しやすいが、第2のブラウザのデフォルトの動作については、それを知っている人は少ないかもしれない.次に、ブラウザ(少なくともieのように)のフォーム提出上のデフォルトの動作を具体的に見てみましょう.フォームに1つの単行テキスト入力ドメインが含まれている場合、他のタイプのフォームコンポーネントがどれだけ含まれているかにかかわらず、その入力ドメインでEnterをクリックすると、フォームが自動的にコミットされます.たとえば、次のコードがあります.

<form action="" method="post">
     <input type="text"  name="sdfsdf"  />
      <textarea</textarea>
      <input type="checkbox"  name='' />
      <input type="hidden"name="aa" value=''  />
</form

解決策は簡単で、もう1つのテキスト入力ボックスを追加すればいいのですが、自動コミットしないために無駄な入力ボックスを追加し、2つの入力ボックスが含まれているエンドユーザーは受け入れますか?新しい入力ボックスをstyleで隠すことができます.たとえば、次のようにします.

<form action="" method="post">
    <input type="text" name="notautosubmit"  style="display:none"/>
    <input type="text" name="username"/>
</form>

キーボードキーをリスニングする方法もあります.keyCode=13の場合、イベントの応答を選択的にフィルタできます.
 

document.onkeypress = function(){
    if(event.keyCode == 13) 
   {
         return  false;
   }
}