form表单回车提交

时间:2023-03-08 16:04:39

当form中只有一个input[type="text"](其他的表单元素可以随意有)的输入框时候,当input[type="text"]获得焦点的时候,无论表单中是否有type="submit"按钮,按下键盘回车键,都会提交表单(都会触发form.submit),如下:

<form id="test-form" action="formaction.php" method="post">
<input type="text" name="name">
</form>

我们有时候希望回车的时候提交表单,比如搜索行为,有时候又不希望回车提交表单,比如一些复杂的表单,需要避免回车键误操作在未完成表单填写的时候就出发了表单提交。那么怎么避免呢,目前我能知道的只有两个解决方案:

(1)添加一个input[type="text"],并隐藏:

<form id="test-form" action="formaction.php" method="post">
<input type="text" name="name">
<input type="text" style="display:none"><!-- 隐藏input -->
</form>

(2)添加一个onkeydown事件:

<form id="test-form" action="formaction.php" method="post">
<input type="text" name="name" onkeydown="if(event.keyCode == 13) return false;">
</form>

如果各位看官还有其他的解决办法,请多多指教!