如何在 Javascript HTML 表单中使用 Enter Button 和 onclick答案

【问题标题】：How to work with Enter Button and onclick in Javascript HTML form如何在 Javascript HTML 表单中使用 Enter Button 和 onclick
【发布时间】：2014-02-17 16:13:51
【问题描述】：

我正在用 JS 和 HTML 编写一个简单的计算器。我正在为输入类型按钮使用 onclick 事件。一切都很好，但是这个表单只在我点击按钮时处理数据，但如果我从键盘上按 ENTER 键则不起作用。

这是我的 HTML 代码

 <form> <input type="text" id="number1"/> 
<select id="operator"> 
<option value="+">+</option> 
<option value="-">-</option>
 <option value="*">*</option> 
<option value="/">/</option> 
</select> 
<input type="text" id="number2"/> 
<input type="button" onclick="getData('data.php','divTarget')" value="Calculate"/> 
</form>

注意：我可能在这个页面上有多个表单，所以我不能使用event.keyCode == 13 onkeydown 事件。因为如果我按 ENTER 键，它可能会处理任何表单。并且不需要 Jquery。

【问题讨论】：

标签： javascript dom

【解决方案1】：

您可以在表单中使用onsubmit 处理程序。您只是在检查按钮单击，当您按 Enter 时不会发生这种情况。

所以改变你的表单标签：

<form onsubmit="getData('data.php','divTarget'); return false;">

还有按钮：

<input type="submit" value="Calculate"/>

【讨论】：

更新页面中的代码，我看不出与原始代码有什么不同。
好的，你必须添加return false;来阻止表单提交。查看我更新的代码。

【解决方案2】：

如果您在输入字段中输入，这应该会提交表单，然后按：

var inputField = document.getElementById("number2");
inputField.onkeyup(function(e) { 
        if ( e.keyCode == 13 ) {
            document.getElementsByTagName('form').submit();
        }
    } 
);

【讨论】：

【解决方案3】：

那就直接写代码吧！

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>

【讨论】：