需求,表单内只存在一个input框时,回车后需要触发表单提交事件
问题一:回车后页面刷新
解决方案:
在form表单内设置:@submit.native.prevent
当前form表单的(input)元素: @keyup.enter.native="handlePassword('password')"
原因:当表单中只有一个input,按回车默认是执行提交表单事件(W3C标准规定如此)
问题二:在火狐浏览器中会出现如下情况
回车后input框会转成英文fff,但此时会触发
其他浏览器中并不会触发
解决历程:
1、考虑使用keypress或keydown,但这时要考虑如果用户一直按住enter键不放,那就会一直触发,与需求违背,不予考虑
2、在代码中监听keydown和keyup事件,看看是为什么会触发enter的keyup事件??
<el-input
v-model.trim="form.add_project_form.name"
clearable
:placeholder="$t('operation.name')"
maxlength="50"
show-word-limit
@keydown.native="handleKeyDown"
@keyup.native="handleKeyUp"
/>
在谷歌浏览器中打印如下:
keydown: KeyF 229
keyup: KeyF 229
keyup: KeyF 70
keydown: KeyF 229
keyup: KeyF 229
keyup: KeyF 70
keydown: KeyF 229
keyup: KeyF 229
keyup: KeyF 70
火狐浏览器打印如下:
keydown: KeyF 229
keyup: KeyF 70
keydown: KeyF 229
keyup: KeyF 70
keydown: KeyF 229
keyup: KeyF 70
对比就会发现,为什么火狐在中文输入状态下回车会触发,因为它的code码为13。
解决方案:
监听input框内keydown事件,并记录code。如果现在触发了keyup.enter,对比一下当前的code码(13)和记录到的keydown时的code码,是不是都是13,如果是就调用,如果不是,就忽略(可能就是火狐浏览器中出现的,中文输入法下敲击的回车)