197

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

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

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

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

ありがとう。

4

12 に答える 12

422

使用する

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

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

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

于 2012-10-16T12:27:01.297 に答える
61

HTML 仕様を読んで、どのような動作が予想されるかを正しく理解することが重要です。

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

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

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

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

編集して追加:

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

于 2011-01-21T21:19:15.067 に答える
22

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

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

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

于 2011-09-16T13:45:19.983 に答える
15

フォーカスされた状態で「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`*/
});
于 2011-01-24T12:14:09.740 に答える
2

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 によってフォームが実際に送信されなくなります。

于 2011-01-21T21:08:03.780 に答える
2

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

于 2011-01-21T20:56:56.307 に答える
2

ドムの例

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

于 2018-09-25T23:07:39.330 に答える
0

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

于 2011-01-21T21:00:20.893 に答える