126


35

HTMLフォーム上の複数の送信ボタン-1つのボタンをデフォルトとして指定

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


ボタンの列は、送信、リセット、およびJavaScriptボタンの組み合わせです。 ボタンの順序は変更される場合がありますが、いずれにしても、保存ボタンは前のボタンと次のボタンの間に残ります。 ここでの問題は、ユーザーがフォームを送信するために「Enter」を押すと、ポスト変数「COMMAND」に「Prev」が含まれることです。通常、これはフォーム上の最初の送信ボタンです。 ただし、ユーザーが[Enter]ボタンを介してフォームを送信すると、[Next]ボタンがトリガーされます。 その前に他のボタンがあっても、デフォルトの送信ボタンとして設定するようなものです。

9 Answer


80


最初のボタンは常にデフォルトです。変更することはできません。 JavaScriptで修正することはできますが、ブラウザではスクリプトを作成しなくてもフォームは予期せず動作します。また、ユーザビリティ/アクセシビリティに関するいくつかのケースを考慮する必要があります。 たとえば、Zoranによってリンクされたコードは、「通常は発生しない」というEnterプレスで誤ってフォームを送信し、他のフィールド以外のコンテンツでEnterプレス用にフォームを送信するIEの動作をキャッチしませんフォーム。 そのため、「

そのスクリプトを含むフォームでEnterキーを押すと、間違ったボタンが送信されます…​ その例で示されているように、実際のデフォルトボタンが「削除」である場合は特に危険です!

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

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

(注: display:none`と visibility:hidden`は、ボタンがデフォルトとして使用されるかどうか、および送信されるかどうかにブラウザ変数の副作用があるため、ボタンを画面外に押すために配置が使用されます。


72


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


と:

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

効果的に順序を逆にするので、「次へ」ボタンはエンターを押すことでトリガーされる値になります。

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


35


Quick’n’dirtyでは、Enterキーを押したときに使用されるsubmit-buttonの非表示の複製を作成できます。

CSSの例

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

HTMLの例


フォームで誰かがエンターキーを押すと、(非表示の)次のボタンが送信者として使用されます。

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


32


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

例:

        Edit program


        Render

FF24およびChrome 35でテスト済み。


28


jQueryを使用している場合、http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-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 "`を追加するだけです。 そのボタンの隠しコピーをフォームの先頭に配置します。


4


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

私のソリューションは、https://stackoverflow.com/a/9491141の応答に基づいています。

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

    Focus into this input:

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

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

.default-button-handler {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}


1


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

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

    return true;
  });
});

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


と同様:

  Delete
  Update

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


0


同じ名前のボタンを使用しないでください。 悪いセマンティクスです。 代わりに、設定されているさまざまな名前の値を探すようにバックエンドを変更する必要があります。


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

if (input name COMMAND_PREV is set) {

} else if (input name COMMAND_SAVE is set) {

} else if (input name COMMENT_NEXT is set) {

}


-1


bobinceのソリューションには、ボタンを作成できるという欠点があります。 Tab-d over, but otherwise unusable. This can create confusion キーボードユーザー向け。

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


これはhttp://www.w3.org/TR/html5/forms.html#form-owner[standard HTML]ですが、残念ながらInternet Explorerではサポートされていません。