中文输入法之input框回车后在不同浏览器间的差异（vue）

作者: Ordinary_zz | 来源:发表于2021-12-15 18:55 被阅读0次

中文输入法之input框回车后在不同浏览器间的差异（vue）
神奇的css
chrome浏览器记住密码后默认填充样式
低版本chrome中文输入法不兼容keyup
elementUI中input框无法输入与禁止输入空格
keyup事件与blur事件冲突解决
input标签
input回车事件未实现但页面刷新
去除浏览器默认样式
2018-04-04 表单美化

需求，表单内只存在一个input框时，回车后需要触发表单提交事件

问题一：回车后页面刷新

解决方案：

在form表单内设置：@submit.native.prevent
当前form表单的(input)元素: @keyup.enter.native="handlePassword('password')"

原因：当表单中只有一个input，按回车默认是执行提交表单事件（W3C标准规定如此）

问题二：在火狐浏览器中会出现如下情况

中文输入法输入字符.png

回车后input框会转成英文fff,但此时会触发
$\color{green}{@keyup.enter.native="handlePassword('password')"}$
其他浏览器中并不会触发

解决历程：

1、考虑使用keypress或keydown，但这时要考虑如果用户一直按住enter键不放，那就会一直触发 $\color{green}{@keypress.enter.native="handlePassword('password')"}$ ，与需求违背，不予考虑
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
$\color{red}{keydown: Enter 229}$
$\color{red}{keyup: Enter 229}$

火狐浏览器打印如下：

keydown: KeyF 229
keyup: KeyF 70
keydown: KeyF 229
keyup: KeyF 70
keydown: KeyF 229
keyup: KeyF 70
$\color{red}{keydown: Enter 229}$
$\color{red}{keyup: Enter 13}$

对比就会发现，为什么火狐在中文输入状态下回车会触发 $\color{green}{@keyup.enter.native="handlePassword('password')"}$ ，因为它的code码为13。

解决方案：

监听input框内keydown事件，并记录code。如果现在触发了keyup.enter,对比一下当前的code码(13)和记录到的keydown时的code码,是不是都是13，如果是就调用 $\color{green}{handlePassword('password')}$ ，如果不是，就忽略(可能就是火狐浏览器中出现的，中文输入法下敲击的回车)