web-dev-qa-db-ja.com

トリガーボタンのクリックを入力

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; 
  }
})

私がこれまでのところ話すことができる限り、それは働いているように思われます、しかし、それは信じられないほど手荒く感じられます。

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

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

ありがとう。

javascriptjqueryhtmlformsenter
150
Rob Wilkerson

を使用して

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

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

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

324
Maddog

HTML仕様を読んで、どのような動作が期待されるかを真に理解することが重要です。

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

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

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

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

追加して編集：

私が考えることができる最も簡単な答えは、フォームの最初の[type="submit"]アイテムとして送信ボタンを配置し、cssでフォームの下部にパディングを追加し、送信ボタンを一番下に配置することですいいね。

54
zzzzBov

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

htmlのボタン5仕様 によると、タイプ属性のないボタンは、タイプが「submit」に設定されたボタンと同じように扱われます。ボタンのタイプを「ボタン」に設定すると、表示されている動作を防ぐ必要があります。

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

19
Leinster

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

here の例を参照してください。

コードにより、<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`*/
});
11
Feniks502

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

6
Ram Thota

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を使用すると、実際にボタンを押すまでフォームが送信されなくなります。

2
Dave

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

1
Sparafusile

ドムの例

  <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（）を使用しない場合、他のボタンがトリガーされます。

1
Mehmet Kus

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

0
Satyajit

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

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

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

<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ボタンを、テキストを入力するときにユーザーが入力するフォームに設定しました。

これはこれまでのところ私のために働いてきた唯一のものです。

0
Dan Vachon