阻止 form 回车 自动提交

此问题是在手机端页面输入时发现的

Form表单只有一个input框,输入内容后直接回车,会直接提交这个表单,但是我的这个表单是通过Ajax提交,Form上并没有Action,所以会直接报错500,在此总结三种阻止form回车提交的方式。

1.form元素上加οnsubmit=“return false”(推荐)
2.多个input存在时按回车不会自动提交(注意:表单中有提交按钮的话,该方法不行)
3.给input绑定onkeydown事件
代码如下:
方法一:form元素上加οnsubmit=“return false”

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

方法二:多个input存在时按回车不会自动提交

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

方法三:给input绑定onkeydown事件

<form action="../test.json" method="get">
   <input type="text" name="age" onkeydown="if(event.keyCode==13)return false;"/>
</form>
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值