javascript - onclick 事件在单击按钮时提交，但在按下键盘上的 Enter 时不提交？

Question

我只使用 HTML 和 JavaScript。

我有一份表格

  <form id="form1">
<input name="name" type="text" size="20">
</form> 

还有一个按钮

<button onclick="outputname()" type="submit">Search</button>

因此，我们的想法是用户在表单上输入一个数字，然后单击搜索按钮，然后执行一个操作(这非常有效)。

但是，如果用户输入数字并按下键盘上的 Enter 按钮，页面就会刷新。 iPad 上也会发生同样的情况。 (显示“返回”按钮而不是“继续”)。

所以我希望 Enter 按钮可以在键盘上使用，而 Go 可以在 iOS 上使用。

其想法是用户输入客户编号并显示相关详细信息。

Answer 1

为您的输入字段和按钮提供一个 ID，以确保捕获正确的 ID:

HTML:

<form action="destination.html" method="post">
    <input id="foo" name="name" type="text" size="20">
    <button id="mybutt" onclick="outputname()" type="submit">Search</button>
</form>

请注意，destination.html 是您要将数据发布到的位置。如果您希望将其发布到同一文件，只需使用:action="" 或将其省略。

Javascript:

document.getElementById('foo').onkeypress = function(e){
    if (!e) e = window.event;
    var keyCode = e.keyCode || e.which;
    if (keyCode == '13'){
        var btn = document.getElementById('mybutt');
        mybutt.click();
        return false;
    }
}

来源:

How to detect when the user presses Enter in an input field

Capturing the Enter key to cause a button click with javascript