132

次のように3つの送信ボタンがあるフォームがあります。

<input type="submit" name="COMMAND" value="&lsaquo; Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="location = 'yada-yada.asp';">

ボタンの列は、送信、リセット、JavaScriptボタンを組み合わせたものです。ボタンの順序は変更される可能性がありますが、いずれの場合も、保存ボタンは前のボタンと次のボタンの間に残ります。

ここでの問題は、ユーザーがEnterフォームを送信するためにヒットすると、投稿変数「COMMAND」に「Prev」が含まれることです。これはフォームの最初の送信ボタンであるため、通常です。ただし、ユーザーがボタンを介してフォームを送信したときに「次へ」ボタンがトリガーされるようにしたいEnter。その前に他のボタンがありますが、これはデフォルトの送信ボタンとして設定するようなものです。

4

9 に答える 9

84

最初のボタンは常にデフォルトです。変更することはできません。JavaScriptを使用して修正を試みることはできますが、フォームはスクリプトを使用せずにブラウザーで予期しない動作をするため、使いやすさ/アクセシビリティのコーナーケースを検討する必要があります。たとえば、Zoranによってリンクされたコードは、Enter pressでフォームを誤って送信しますが<input type="button">、これは通常は発生せず、フォーム内の他の非フィールドコンテンツでEnterPressのフォームを送信するというIEの動作をキャッチしません。 。したがって、<p>そのスクリプトを含むフォーム内のテキストをクリックしてEnterキーを押すと、間違ったボタンが送信されます...その例で示されているように、実際のデフォルトボタンが「削除」の場合は特に危険です。

私のアドバイスは、デフォルトを再割り当てするためにスクリプトハックを使用することを忘れることです。ブラウザの流れに沿って進み、デフォルトのボタンを最初に配置します。レイアウトをハックして画面上の順序を希望どおりに設定できない場合は、ソースの最初にダミーの非表示ボタンを設定し、デフォルトにするボタンと同じ名前/値を使用することができます。

<input type="submit" class="defaultsink" name="COMMAND" value="Save" />

.defaultsink {
    position: absolute; left: -100%;
}

（注：ポジショニングは、ボタンを画面外に押すために使用さdisplay: noneれvisibility: hiddenます。これは、ボタンがデフォルトとして使用されるかどうか、およびボタンが送信されるかどうかにブラウザー変数の副作用があるためです。）

于 2009-12-26T12:48:26.850 に答える
79

私の提案は、この行動と戦わないことです。フロートを使用して、順序を効果的に変更できます。例えば：

<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>

と：

#buttons { overflow: hidden; }
#buttons input { float: right; }

は実質的に順序を逆にするため、「次へ」ボタンはEnterキーを押すことによってトリガーされる値になります。

この種の手法は、よりハッキーなJavaScriptメソッドに頼ることなく、多くの状況をカバーします。

于 2009-12-26T12:35:07.063 に答える
38

type=submitデフォルトにしたいボタンと他のボタンに設定しtype=buttonます。以下のフォームで、任意の入力フィールドでEnterキーを押すと、Renderボタンが機能します（フォームの2番目のボタンであるにもかかわらず）。

例：

    <button id='close_button' class='btn btn-success'
            type=button>
      <span class='glyphicon glyphicon-edit'> </span> Edit program
    </button>
    <button id='render_button' class='btn btn-primary'
            type=submit>             <!--  Here we use SUBMIT, not BUTTON -->
      <span class='glyphicon glyphicon-send'> </span> Render
    </button>

FF24とChrome35でテスト済み。

于 2014-06-16T13:54:56.527 に答える
36

クイック'n'ダーティでは、Enterキーを押すと、送信ボタンの非表示の複製を作成できます。これを使用する必要があります。

CSSの例

input.hidden {
    width: 0px;
    height: 0px;
    margin: 0px;
    padding: 0px;
    outline: none;
    border: 0px;
}

HTMLの例

<input type="submit" name="next" value="Next" class="hidden" />
<input type="submit" name="prev" value="Previous" />
<input type="submit" name="next" value="Next" />

誰かがフォームにEnterキーを押すと、（非表示の）次へボタンが送信者として使用されます。

IE9、Firefox、Chrome、Operaでテスト済み

于 2013-01-22T16:44:43.670 に答える
28

jQueryを使用している場合、ここで行われたコメントからのこのソリューションはかなり巧妙です。

$(function(){
    $('form').each(function () {
        var thisform = $(this);
        thisform.prepend(thisform.find('button.default').clone().css({
            position: 'absolute',
            left: '-999px',
            top: '-999px',
            height: 0,
            width: 0
        }));
    });
});

class="default"デフォルトにしたいボタンに追加するだけです。フォームの先頭にそのボタンの非表示のコピーを配置します。

于 2010-07-12T20:23:24.830 に答える
5

これを行うためのJavaScript以外の方法を研究していたので、これを復活させています。私はキーハンドラーに興味がありませんでした。CSSの再配置ではタブの順序が変更されないため、CSSの配置によってタブの順序が崩れていました。

私の解決策は、 https：//stackoverflow.com/a/9491141での応答に基づいています。

ソリューションソースは以下のとおりです。tabindexは、非表示のボタンのタブの動作を修正するために使用されます。また、aria-hiddenを使用して、ボタンがスクリーンリーダーによって読み取られたり、支援デバイスによって識別されたりしないようにします。

<form method="post" action="">
  <button type="submit" name="useraction" value="2nd" class="default-button-handler" aria-hidden="true" tabindex="-1"></button>
  <div class="form-group">
    <label for="test-input">Focus into this input: </label>
    <input type="text" id="test-input" class="form-control" name="test-input" placeholder="Focus in here and press enter / go" />
  </div>

DOMの1番目のボタンDOMの2番目のボタンDOMの3番目のボタン

このソリューションに不可欠なCSS：

.default-button-handler {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}
于 2015-08-10T04:41:00.137 に答える
1

jQueryを使用した別のソリューション：

$(document).ready(function() {
  $("input").keypress(function(e) {
    if (e.which == 13) {
      $('#submit').click();
      return false;
    }

    return true;
  });
});

これは次のフォームで機能し、「更新」をデフォルトのアクションにします。

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <input type="submit" name="button2" value="Delete" />
  <input type="submit" name="button1" id="submit" value="Update" />
</form>

と同様：

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <button type="submit" name="button2">Delete</button>
  <button type="submit" name="button1" id="submit">Update</button>
</form>

これは、フォームの入力フィールドにフォーカスがある場合にのみEnterキーをトラップします。

于 2015-03-17T22:48:50.517 に答える
0

同じ名前のボタンを使用しないでください。それは悪い意味論です。代わりに、バックエンドを変更して、設定されているさまざまな名前の値を探す必要があります。

<input type="submit" name="COMMAND_PREV" value="&lsaquo; Prev">
<input type="submit" name="COMMAND_SAVE" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND_NEXT" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="window.location = 'yada-yada.asp';">

バックエンドで使用している言語がわからないため、いくつかの擬似コードを提供します。

if (input name COMMAND_PREV is set) {

} else if (input name COMMAND_SAVE is set) {

} else if (input name COMMENT_NEXT is set) {

}
于 2009-12-26T12:34:45.903 に答える
-1

Tabbobinceのソリューションには、 -dオーバーできるボタンを作成するという欠点がありますが、それ以外の場合は使用できません。これにより、キーボードユーザーが混乱する可能性があります。

別の解決策は、あまり知られていないform属性を使用することです。

<form>
    <input name="data" value="Form data here">
    <input type="submit" name="do-secondary-action" form="form2" value="Do secondary action">
    <input type="submit" name="submit" value="Submit">
</form>

<form id="form2"></form>

これは標準のHTMLですが、残念ながらInternetExplorerではサポートされていません。

于 2015-05-26T13:25:16.947 に答える