在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键而不是激活按钮

回答

相关问题