在HTML表單上提交Enter鍵而不是激活按鈕

我有一個帶有單個submit輸入的HTML表單，但也有各種button元素。當用戶按下'enter'鍵時，我希望它實際上提交表單，但是（至少在Chrome 15中），我發現它觸發了第一個button（因爲之前發生的HTML比我猜）。在HTML表單上提交Enter鍵而不是激活按鈕

我知道一般情況下，您不能強制瀏覽器支持特定的輸入，但我真的認爲他們會傾向於使用submit而不是button元素。我可以對HTML做一些小的調整來完成這項工作，或者我將不得不採用某種Javascript方法嗎？

這裏是HTML的一個粗略的樣機：

<form action="form.php" method="POST"> 
    <input type="text" name="field1"/> 
    <button onclick="return myFunc1()">Button 1</button> 
    <input type="submit" name="go" value="Submit"/> 
</form>

來源

2011-11-28 andygeers

檢查這個問題：http：// stackoverflow。com/a/925387/1031900 –

@OfirFarchy我想我覺得這個問題不同的是，只有一個提交，其他的都是按鈕。 – andygeers

那麼，如果你不反對使用JS和jQuery檢查我的＆大衛的答案 –

您可以使用jQuery：

$(function() { 
    $("form input").keypress(function (e) { 
     if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { 
      $('button[type=submit] .default').click(); 
      return false; 
     } else { 
      return true; 
     } 
    }); 
});

來源

2011-11-28 10:33:00

因爲這是被接受的答案：向下滾動一個非常簡單的純HTML解決方案。 – jlh

試試這個，如果輸入鍵被按下，你可以捕捉它像這樣的例子，我開發有一天的答案html button specify selected，看看這是否有幫助。

指定表單名稱，例如yourFormName，那麼您應該能夠提交表單而不必關注表單。

document.onkeypress = keyPress; 

function keyPress(e){ 
    var x = e || window.event; 
    var key = (x.keyCode || x.which); 
    if(key == 13 || key == 3){ 
    // myFunc1(); 
    document.yourFormName.submit(); 
    } 
}

來源

2011-11-28 10:33:17 david

如果表單有更多的提交按鈕，這將有助於： document.getElementById（「submit」）。click（）; – Muflix

這是一種避開HTML中默認行爲的方式。請參閱[上面的答案]（http://stackoverflow.com/a/16462846/1327983）爲什麼。 – alttag

由於只有一個（或與此解決方案可能連一個也沒有）提交按鈕，這裏是基於jQuery的解決方案，將在同一頁上的多個形式的工作...

<script type="text/javascript"> 
    $(document).ready(function() { 

     var makeAllFormSubmitOnEnter = function() { 
      $('form input, form select').live('keypress', function (e) { 
       if (e.which && e.which == 13) { 
        $(this).parents('form').submit(); 
        return false; 
       } else { 
        return true; 
       } 
      }); 
     }; 

     makeAllFormSubmitOnEnter(); 
    }); 
</script>

來源

2012-04-26 01:24:32 Darren

您不需要JavaScript來選擇默認提交按鈕或輸入。您只需要將其標記爲type="submit"，其他按鈕標記爲type="button"。在你的例子中：

<button type="button" onclick="return myFunc1()">Button 1</button> 
<input type="submit" name="go" value="Submit"/>

來源

2013-05-09 13:22:03

這實際上在某些瀏覽器中無法正常工作。我今天剛剛遇到了這個問題，認爲type =「submit」會使其成爲默認值，但它不適用於Chrome或Safari。 –

它適用於Chrome和Safari。它一定是別的東西。 –

在額外按鈕上設置type =「button」AND設置type =「submit」是造成差異的原因。 – Alex

我只是在Chrome和Firefox和IE10中給了這個旋風。如上所述 - 確保您已標記type =「button」，「reset」，「submit」等，以確保它正確級聯並選擇正確的按鈕。

或許還設置他們都具有相同的形式（即所有爲工作對我來說）

來源

2013-06-22 03:24:32 Flanamacca

我只是打了一個問題與此有關。煤礦是一個脫落的改變input爲button，我想有一個寫的不好/>標籤終結者：

所以我不得不：

<button name="submit_login" type="submit" class="login" />Login</button>

而且剛纔它修改爲：

<button name="submit_login" type="submit" class="login">Login</button>

現在就像一個魅力，總是惱人的小東西... HTH

來源

2014-08-04 08:59:42

可能是最快的解決方案 –

$("form#submit input").on('keypress',function(event) { 
    event.preventDefault(); 
    if (event.which === 13) { 
    $('button.submit').trigger('click'); 
    } 
});

來源

2017-09-21 12:41:59 samehanwar

在HTML表單上提交Enter鍵而不是激活按鈕

回答

相關問題