form表单焦点在输入按enter自动刷新页面

案发现场

form表单焦点在输入按enter自动刷新页面_第1张图片

就是这个搜索框,我鼠标键入输入框的时候然后按鼠标上的enter键竟然会自动提交表单并刷新页面!

事故分析

1、一开始我以为是后面那个button按钮的锅,因为我用的type="submit",然后我就把这个按钮改成type="button",但是,这并没有什么卵用,所有我觉得问题不是出在这。
2、后面我就网上百度查原因,然后让我找到了另一种可能:当表单中只有一个input输入元素时,点击enter键,form表单会自动提交。 看到这个我就有点怀疑了,然后根据解决方法试了一下。

解决
//第一种
"return false"> type="text" name="test"/>
//第二组 多加一个input,并设置为display:none
type="text" name="test" style="display:none"/> type="text" name="test"/>
真相大白

在使用了上诉两种方法后,我发现这两种方法都能解决我的问题,所以我觉得事故原因就是上诉第二种,同时解决方法也是上诉这两种,其他的我就不知道了。over

你可能感兴趣的:(大前端-html/css)