form_javascript スキルを送信するために Enter キーを押すことを無効にする方法

WBOY
リリース: 2016-05-16 15:55:48
オリジナル
1675 人が閲覧しました

自動送信が行われる場合、次の 2 つの可能性があります:

1 つ目は、JavaScript コードを作成することです。ユーザーが Enter キーをクリックすると、JS イベント リスニング メカニズムを通じてフォームの送信がトリガーされます。

2 つ目は、ブラウザのデフォルトの動作を利用することです (少なくともこれが私が見つけた動作です)。ブラウザーには、Web ページを解析するときのデフォルトの動作が多数あります。たとえば、ページにフォームと送信ボタンがある場合、ページが開かれると、フォーカスは自動的に送信ボタンに置​​かれます。同様に、フォームに単一行のテキスト入力フィールド (テキスト) が 1 つだけある場合、この入力フィールドで Enter キーが押されると、ブラウザーは自動的にフォームを送信します。

最初の状況については一般によく知られており、理解するのは簡単ですが、2 番目のブラウザーのデフォルトの動作については、これを知っている人は少ないかもしれません (少なくとも IE については) ブラウザーを詳しく見てみましょう。フォーム送信時のデフォルトの動作。

フォームに 1 行のテキスト入力フィールドが含まれている場合、他の種類のフォーム コンポーネントがいくつ含まれていても、入力フィールドで Enter をクリックすると、フォームは自動的に送信されます。

たとえば次のコード:

<form action="" method="post">
<input type="text" name="sdfsdf"/>
<input type="checkbox">sdfsdf
<input type="hidden"name="aa"/></form>
ログイン後にコピー

フォームに 2 つ以上の単一行のテキスト入力フィールドが含まれている場合、他のタイプのフォーム コンポーネントが含まれているかどうかに関係なく、Enter キーを押しても自動的に送信されません。次に例を示します。

<form action="" method="post"
<input type="text"
name="sdfsdf"/
<input type="text"
name="sddf"/</form
ログイン後にコピー

この方法は非常に簡単で、上で示した例ですでに説明されていますが、自動的に送信しないようにするには、不要な入力ボックスを追加する必要があると思われます。 2 つの入力ボックスはエンド ユーザーに受け入れられるでしょうか?実際、これはスタイルを使用して、新しく追加された入力ボックスを非表示にすることができます。たとえば、

<form action="" method="post"
<input type="text" name="notautosubmit"
style="display:none"/
<input type="text"
name="username"/</form
ログイン後にコピー

ボタンボタンの Enter トリガーイベントをバインドする方法もあります:
document.onkeypress = function(){
if(event.keyCode == 13) {search();returnfalse;}} ここで、検索メソッドは onclick イベントです:

最終的な解決策:

<script language="javascript"> 
  function defineSubmit(btn) 
  { 
    if("submit1" == btn.value) 
    { 
      document.testForm.action="firstAction"; 
    } 
    else 
    { 
      document.testForm.action="secondAction"; 
    } 
     
    document.testForm.submit(); 
  } 
</script> 
<form name="testForm" method="post"> 
    username:<input type="text" name="username"/> 
    password:<input type="password" name="password"/> 
    <input type="button" name="submitName" onclick="defineSubmit(this)" value="submit1"/> 
    <input type="button" name="submitName" onclick="defineSubmit(this)" value="submit2"/> 
</form> 
ログイン後にコピー

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート