按钮 onclick 工作正常，但按 Enter 提交表单时出现不良行为

Question

我不确定是否需要一个表单，它是一个 javascript，它从文本框中获取输入，对其进行一些计算，然后在 div 中显示结果。我只希望用户能够通过单击“提交”或按 Enter 键来提交。

简而言之，如果按钮类型是“按钮”，则单击工作正常，但按 Enter 工作很奇怪，如果按钮类型是“提交”，按 Enter 工作正常，但单击工作很奇怪。下面是代码示例（删除了一些工作正常的业务逻辑和其他变量，以便更简单地在此处显示）：

<form action="#" onsubmit="calcserial()">
Serial no: <input type="text" name="serialno" id="serialno" /><br />
<input type="button" value="Submit" onclick="calcserial()" />
</form>

<script type="text/javascript">
function calcserial(){  

var x=document.getElementById('serialno').value;

var year=[business logic];
var month=[business logic];

document.getElementById('results').innerHTML="Shipped: " + month + ", " + year;  
} 
</script>

<div id=results></div>

为了提供有关奇怪行为的更多详细信息，当输入类型为“按钮”并且我按 Enter 键时，而不是与运行 calcserial() 函数相比，文本框被清除，并且 url 更改为：

[filename].php?serialno=[value]#

[value] 为文本框中的内容。然后，如果我再次输入相同的精确值并再次按 Enter 键，它就会按预期工作，但前提是 url 已经显示了我正在提交的值。如果我输入不同的值，文本框将再次被清除，并且 url 会更改以显示新值。如果我将输入类型切换为“提交”，则按 Enter 键的问题得到解决，但单击按钮提交时会出现同样的问题。

为什么会发生这种情况？有什么想法如何解决吗？谢谢！

Answer 1

尝试更改此：

改为：

这应该会停止通常在提交表单时发生的默认操作，在您的情况下，使用 action="#" 会导致重新加载同一页面。

鉴于您实际上不想提交任何内容（到网络服务器），因此您实际上并不需要表单。 加上检查文本输入的 Enter onkeyup 可以达到相同的效果。