HTML 表單上的多個提交按鈕 – 指定一個按鈕作為預設值

問題描述

我有一個表單有三個提交按鈕，如下所示：

<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”; 正常，因為這是表單上的第一個提交按鈕。然而，當使用者透過輸入按鈕提交表單時，我想要觸發”Next” 按鈕。類似於將其設定為預設提交按鈕，即使之前還有其他按鈕。

最佳解決方案

我的建議是不要打這個行為。您可以使用浮標有效地更改訂單。例如：

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

將有效地反轉順序，因此”Next” 按鈕將是透過按 Enter 鍵觸發的值。

這種技術將涵蓋許多情況，而無需訴諸更多 hacky Javascript 方法。

次佳解決方案

第一個按鈕總是預設的; 它不能改變。雖然您可以嘗試使用 JavaScript 進行修復，但是在沒有指令碼的瀏覽器中，表單將會出現意外，並且還有一些可用性/可訪問性角色的情況需要考慮。例如，由 Zoran 連結的程式碼將意外地在<input type="button"> 中輸入新聞中的表單，這通常不會發生，並且不會捕獲 IE 的行為，以表單的形式向其他 non-field 內容提交輸入表單。因此，如果您使用該指令碼單擊<p> 中的某些文字，然後按 Enter 鍵，將會提交錯誤的按鈕… 如果在該示例中給出了真正的預設按鈕為「刪除」，則會特別危險。

我的建議是忘記使用指令碼攻擊來重新設定預設值。隨著瀏覽器的流動，只需先放置預設按鈕。如果您無法使用佈局給出您想要的 on-screen 命令，那麼可以先在原始碼中建立一個虛擬的不可見按鈕，其名稱/值與您要預設的按鈕相同：

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

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

(注意：定位用於按下按鈕 off-screen，因為 display: none 和 visibility: hidden 有 browser-variable side-effects 是否將該按鈕作為預設值以及是否提交。)

第三種解決方案

Quick’n’dirty 你可以建立一個隱藏的副本的 submit-button，應該使用，當按 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" />

如果有人現在進入您的表單，(隱藏)next-button 將被用作提交者。

經過 IE9，Firefox，Chrome 和 Opera 測試

第四種方案

如果你使用 jQuery，這個解決方案從一個評論 here 是相當光滑的：

$(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"新增到要預設的按鈕即可。它在表單的開始處放置該按鈕的隱藏副本。

第五種方案

將 type=submit 設定為您要預設的按鈕，將 type=button 設定為其他按鈕。現在在下面的表單中，您可以在任何輸入欄位中輸入 Enter，而 Render 按鈕將工作 (儘管事實上它是表單中的第二個按鈕) 。

例：

    <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 中測試。

第六種方案

我想 this 是你要找的。這個示例在給定的輸入上收集了回車鍵，並提交了表單，就像使用者點選了 CSS 類設定為’default’ 的按鈕元素一樣。

參考文獻

Multiple submit buttons on HTML form – designate one button as default

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

HTML 表單上的多個提交按鈕 – 指定一個按鈕作為預設值