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

尝试更改此内容：

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

对此：

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

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

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

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

1 个答案: