トリガーボタンのクリックを入力してください

2つのボタンのあるページがあります。1つは<button>要素で、もう1つは<input type="submit">です。ボタンはこの順序でページに表示されます。フォームの任意の場所にあるテキストフィールドでを押す<Enter>と、ボタン要素のclickイベントがトリガーされます。これは、ボタン要素が最初にあるためだと思います。

デフォルトボタンを設定するための信頼できる方法のように見えるものは何も見つかりません。また、この時点では必ずしもそうしたくありません。より良いものがない場合は、フォーム上の任意の場所に<Enter>キーを押したので、それが押されたキーである場合は、単に無効にします。

$('form').keypress( function( e ) {
  var code = e.keyCode || e.which;

  if( code === 13 ) {
    e.preventDefault();
    return false; 
  }
})

私の知る限り、これは機能しているように見えますが、信じられないほどハムフィストだと感じています。

これを行うためのより洗練されたテクニックを知っている人はいますか？

同様に、このソリューションに私が気付いていない落とし穴はありますか？

ありがとう。

使用する

<button type="button">Whatever</button>

トリックを行う必要があります。

その理由は、フォーム内のボタンのタイプが暗黙的にに設定されているためsubmitです。zzzzBozが言うように、Specは最初buttonまたはinputwith type="submit"がこの状況でトリガーされるものであると述べています。特にを設定type="button"すると、ブラウザによる考慮から削除されます。

HTML仕様を読んで、予想される動作を正確に理解することが重要です。

HTML5の仕様では、明示的に何が起こるかを述べていますimplicit submissions：

フォーム要素のデフォルトボタンは、フォームの所有者がそのフォーム要素であるツリー順の最初の送信ボタンです。

ユーザーエージェントがユーザーに暗黙的にフォームを送信させることをサポートしている場合（たとえば、一部のプラットフォームでは、テキストフィールドがフォーカスされているときに「Enter」キーを押すと、暗黙的にフォームが送信されます）、デフォルトボタンにアクティブ化が定義されているフォームに対してこれを実行します。この動作により、ユーザーエージェントは、デフォルトのボタンで合成クリックのアクティブ化手順を実行する必要があります。

これはHTML4仕様で明示的にされていませんが、ブラウザーは既にHTML5仕様で説明されているものを実装しています（これが明示的に含まれている理由です）。

追加して編集：

私が考えることができる最も簡単な答えは、送信ボタンを[type="submit"]フォームの最初の項目として配置し、CSSを使用してフォームの下部にパディングを追加し、送信ボタンを希望する下部に絶対的に配置することです。

これを修正するためにJavaScriptやCSSは必要ないと思います。

ボタンのhtml 5仕様によると、type属性のないボタンは、タイプが「送信」に設定されたボタンと同じように扱われます。つまり、ボタンを含むフォームを送信するためのボタンとして扱われます。ボタンのタイプを「ボタン」に設定すると、表示されている動作を防ぐことができます。

ブラウザのサポートについてはわかりませんが、ボタンのHTML 4.01仕様で同じ動作が指定されているので、かなり良いと思います。

フォーカスされた状態で「Enter」を押す<input type="text">と、最初に配置された要素で「クリック」イベントがトリガーされます：<button>または<input type="submit">。で「Enter」を押すと<textarea>、新しいテキスト行を作成するだけです。

こちらの例をご覧ください。

あなたのコードはで新しいテキスト行を作成することを妨げる<textarea>ので、のためだけにキー押下をキャッチする必要があります<input type="text">。

しかし、なぜEnterテキストフィールドを押す必要があるのですか？Enterキーを押してフォームを送信したい<button>が、レイアウトの最初にとどまる必要がある場合は、マークアップを試してください。<input type="submit">コードをの前<button>に配置し、CSSを使用して必要なレイアウトを保存します。

Enterキーを押してマークアップを保存する：

$('input[type="text"]').keypress(function (e) {
    var code = e.keyCode || e.which;
    if (code === 13)
    e.preventDefault();
    $("form").submit(); /*add this, if you want to submit form by pressing `Enter`*/
});

<button>デフォルトで要素を使用する場合は常に、そのボタンが考慮されるtype="submit"ため、ボタンを定義すると、そのボタンtype="button"は<button>送信ボタンとは見なされません。

フォームのテキストフィールドでEnterキーを押すと、デフォルトでフォームが送信されます。このように動作させたくない場合は、Enterキーを押して、これまでと同じように使用する必要があります。これを回避する方法はありません。フォームにボタンがない場合でも、この方法で機能します。

javascriptを使用して、適切な時間までフォームの送信をブロックできます。非常に大まかな例：

<form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html">

    <input type='text' name='txtTest' />

    <input type='button' value='Submit' 
        onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' />

</form>

Enterキーを押してもフォームの送信がトリガーされますが、JavaScriptは実際にボタンを押すまでフォームを送信しません。

ドムの例

  <button onclick="anotherFoo()"> Add new row</button>
  <input type="text" name="xxx" onclick="foo(event)">

JavaScript

function foo(event){
   if(event.which == 13 || event.keyCode == 13) // for crossbrowser
   {
     event.preventDefault(); // this code prevents other buttons triggers use this
     // do stuff
   }
}

function anotherFoo(){
  // stuffs.
}

preventDefault（）を使用しない場合、他のボタンがトリガーされます。

次のようにします。ボタンのonclickイベントのハンドラー（送信ではない）で、イベントオブジェクトのキーコードを確認します。「Enter」の場合はfalseを返します。

私の状況ではSubmit、フォーム要素内にとの2つのボタンがUpdateありDeleteます。Deleteボタンは、画像を削除し、Updateボタンがフォームにテキストフィールドを使用してデータベースを更新します。

のでDelete、ボタンは、フォームの最初だった、それは上のデフォルトボタンだっEnterキー。私が欲しかったものではありません。ユーザーは、Enter一部のテキストフィールドを変更した後にヒットできると期待します。

ここにデフォルトボタンを設定するための私の答えを見つけました：

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>

スクリプトを使用せずに、各ボタンが属するフォームを<button> form="bla"属性を使用して定義しました。私はセットDelete存在し、設定されていないフォームにボタンをUpdate、私は上のトリガーに望んでいた、ボタンEnter、ユーザーがテキストを入力する際にあろうと、フォームへの鍵を。

これまでのところ、私にとって唯一有効なことです。

このようなことができます。

イベントを共通の関数にバインドし、キーを押すかボタンをクリックしてイベントを呼び出します。

例えば。

function callME(event){
    alert('Hi');
}



$('button').on("click",callME); 
$('input ').keypress(function(event){
  if (event.which == 13) {
    callME(event);
  }
});

「送信」タイプのボタンをフォームの最初の要素として追加し、非表示にしました（width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;）。サイトの更新のように機能します。つまり、サイトが再度読み込まれることを除いて、ボタンが押されても何もしません。私にとってはうまくいきます...