解决Enter触发form表单提交的问题

测试组在测试一个查询列表的时候,发现点击enter键会界面出现报错。

我查了一些资料,发现浏览器在form表单提交这块为我们做了处理。

如果表单里只有一个type=”text”的input,那么点击enter就会触发提交事件

知道规则问题就好解决了

<html>
    <form>
        <input type='text' name='code'>
    </form>
</html>

讲上面这个简单的代码复制到一个新建的html文件中,当输入框获得焦点,点击enter就会发现在地址栏的url后面出现

?code=输入值

这是因为form表单进行了一次提交。

 

解决问题的方法,网上的资料也提供了好几种,记录如下

1,最简单当然是去除form标签,这样就不会有触发提交问题了

2,额外添加一个不展示的input框

3,添加表单属性onsubmit="return false"

如果没有特殊要求一定使用form标签,那么第一种方式最适合

不然建议使用第三种方式,这样可以从根本上解决问题

 

 

知识使我快乐

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章