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

Question

我不确定我是否需要一个表单，它是一个 javascript，它从文本框中获取输入，对其进行一些计算，然后在 div 中显示结果。我只希望用户能够通过单击提交或按 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 会更改为显示新值。如果我将输入类型切换为“提交”，则按回车即可解决问题，但单击按钮提交时会出现同样的问题。

为什么会这样？任何想法如何解决它？谢谢！

Answer 1

尝试改变这个：

<form action="#" onsubmit="calcserial()">

到这里：

<form action="#" onsubmit="calcserial();return false;">

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

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