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

StackOverflow https://stackoverflow.com/questions/1963245

  •  21-09-2019
  •  | 
  •  

質問

この質問にはすでに答えがあります:

次のような 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 ボタンが混在しています。ボタンの順序は変更される場合がありますが、いずれの場合も、保存ボタンは「前へ」ボタンと「次へ」ボタンの間に残ります。

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

役に立ちましたか？

解決

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

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

有効入力打撃によってトリガ値となるため、したがって、「次へ」ボタンを逆にします。

この種の技術は、より多くのハックJavaScriptの方法に頼ることなく、多くの状況をカバーします。

他のヒント

最初のボタンは、常にデフォルトです。それを変更することはできません。あなたなくなりはの形式は、スクリプトなしでブラウザで予期しない動作をします、JavaScriptでそれを修正しようとすることができ、そして考えるためにいくつかのユーザビリティ/アクセシビリティコーナーケースがあります。例えば、ゾランによってリンクされたコードは、誤って正常に起こらないだろう、との他の非フィールドの内容にプレスを入力するためのフォームを提出するIEの動作をキャッチしないであろう、<input type="button">にプレスを入力の上、フォームを送信します形。あなたがそのスクリプトと入力し、Enterキーを押してフォームで<p>でいくつかのテキストをクリックした場合はその一例で与えられたように、間違ったボタンは、もし特に危険...提出される予定で、実際のデフォルトボタンは「削除」です！

私のアドバイスは、再割り当てdefaultnessにスクリプトハックを使用して忘れることであろう。ブラウザの流れで行くと、ちょうど最初のデフォルトボタンを配置。あなたはあなたが欲しい、画面上の順序を与えるためにレイアウトをハックすることができない場合は、デフォルトにしたいボタンと同じ名前/値で、ソースに第1のダミー見えないボタンを持っていることによってそれを行うことができます。 

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

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

（注：。display: noneとvisibility: hiddenボタンがデフォルトとして、それが提出されていますか取られているかどうかのブラウザ変数副作用を持っているので、位置決めがオフスクリーンのボタンをプッシュするために使用される）

Quick'n'dirtyあなたが入力した押したときに、使用すべきである提出ボタンの隠された複製を作成することができます。

例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" />
誰か今ヒットはフォームに入力した場合は、

、（隠された）次のボタンは、提出者として使用されます。

IE9、Firefoxの、クロムとOperaでテスト

あなたは他のボタンにデフォルトとtype=submitになりたいボタンに設定type=button。今の形であなたが任意の入力フィールドに入力します打つことができる、と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とChrome 35でテストされます。

あなたはjQueryの、作られたコメントから、このソリューションを使用している場合は、<のhref =「http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-jquery/」 REL = "noreferrer">ここのはかなり滑りやすいです。

$(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"を追加します。それは右のフォームの最初にそのボタンの隠されたコピーを置きます。

私はこれを行うために、非JavaScriptの方法を研究していたので、

私はこれを復活しています。私は、キーのハンドラにはなかった、とCSSの再配置は、タブの順序を変更しないので、CSSのポジショニングのものは、タブ順序が破損する原因となりました。

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

は、溶液源は以下の通りです。 tabindex属性が正しいタブ隠されたボタンの動作と同様に、アリア、隠されたボタンは、補助装置によって識別されるスクリーンリーダー/によって読み出さを避けるためにに使用されています。 

<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で第一ボタン   DOMで第二ボタン   DOMで3番目のボタン

この解決のために不可欠なCSSます：

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

別の解決策、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>

このトラップフォームの入力フィールドにフォーカスがあるときにのみキーを入力します。

あなたは同じ名前のボタンを使用するべきではありません。それは悪い意味論です。代わりに、別の名前の値であることセットを探すためにあなたのバックエンドを変更する必要があります：

<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) {

}
bobinceのソリューションは、オーバータブの -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 である、しかし残念ながらではサポートされていませんInternet Explorerのます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top