阻止 form 回车 自动提交

Posted 2020-10-06 草木物语

 

问题:当form表单中只有一个input时,在input中按回车键会自动提交.

解决方案:

　　1.form元素上加onsubmit="return false"(推荐)

　　2.多个input存在时按回车不会自动提交(注意:表单中有提交按钮的话,该方法不行)

　　3.给input绑定onkeydown事件

 

代码:

　　方法一:

　　　　form元素上加onsubmit="return false"

<form action="../test.json" method="get" onsubmit="return false">
    <input type="text" name="age" id="age" value="" />
</form>

　　方法二:

　　　　加一个input时。注意:隐藏的话不能使用type="hidden"(),要使用display:none

<form action="../test.json" method="get">
    <input type="text" name="age" id="age" value="" />
    <input type="text" style="display: none;" />
</form>

　　方法三:

　　　　如果onkeydown是回车键,则return false

<form action="../test.json" method="get">
    <input type="text" name="age" id="age" value="" onkeydown="if(event.keyCode==13)return false;"/>
</form>