关于输入框按回车自动刷新页面的4个解决方案

现象:el-input在绑定@keypress.enter.native后,第一次回车时会刷新页面,后面在回车就不会了。
原因:

W3C 标准中有如下规定: When there is only one single-line text input field in a
form, the user agent should accept Enter in that field as a request to
submit the form. 即:当一个 form
元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在 标签上添加
@submit.native.prevent。

解决方案

1、直接去除掉form表单,当然这是最简单粗暴的方法。

2、如果一个input会自动提交,那么比较容易想到的是再加一个input。值得注意的是 这里的input不能设置type为hidden,这样一样是不生效的,form一样会认为只有一个input。需要设置成  。

3、给input加上回车事件直接return false。在input加上οnkeydοwn="if(event.keyCode==13){return false;} 。

4、直接阻止form表单的提交,在form表单加入οnsubmit="return false;"。

你可能感兴趣的:(前端-JQuery)