先以html为例,el-input雷同(el-input在最后~)
1、场景
如果form表单中,只要有一个可输入的输入框,输入内容后回车(enter键)会默认提交整个表单(浏览器默认行为)。
网上说表单中只有一个输入框时回车才会触发表单提交,但是我试了输入框+按钮、输入框+多选、输入框+隐藏域,只要在输入框中回车就会提交整个表单,但是我在element中又没有发现这个问题,难道element在封装的时候处理了还是怎么滴,原因我暂时没找到。
2、解决
看了其他大佬的文章后,暂时有4种解决办法
2.1 禁用整个页面的enter事件(不建议使用)
2.2 禁用input框的回车功能——按下回车时,直接return false就不会提交表单啦
2.3 去除form——没啥特别的,不放在form里就可以了(手动笑哭)
2.4 在form上添加onsubmit="return false",会直接阻止表单回车提交(推荐)
3、el-form:
使用@submit.native.prevent阻止表单默认行为
注意使用keyup.enter.native是没有用的,虽然告诉Input使用原生事件,但是并没有阻止表单的默认行为~
遗留问题
1、input绑定keydown事件的时候,方法写在window.onload里为什么不行???(在报方法未定义)
原因:window.onload在整个页面加载完的时候才会加载,在浏览器绘制input的时候检测到有绑定事件,此时由于js还未被加载,所以报方法未定义