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

现象&＃xff1a;el-input在绑定&＃64;keypress.enter.native后&＃xff0c;第一次回车时会刷新页面&＃xff0c;后面在回车就不会了。
原因&＃xff1a;

W3C 标准中有如下规定&＃xff1a; 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. 即&＃xff1a;当一个 form
元素中只有一个输入框时&＃xff0c;在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为&＃xff0c;可以在 标签上添加
&＃64;submit.native.prevent。

解决方案

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

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

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

4、直接阻止form表单的提交&＃xff0c;在form表单加入οnsubmit&＃61;"return false;"。