el-form中只有一个el-input 回车刷新页面问题

先以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还未被加载,所以报方法未定义

你可能感兴趣的:(el-form中只有一个el-input 回车刷新页面问题)