输入框获得焦点时切换为英文输入法

发表于   |   分类于

需求背景：二维码核销、扫码出入场需要扫描二维码获取数据的场景，如果输入框获得焦点时为中文输入法，扫码得到的数据会有问题，因此需要在输入框获取焦点时切换为英文输入法。

经过查找，通过修改css来切换输入法：

1
<input id="test2" name="test2" style="ime-mode:active"></input>

原博客：完成输入框自动切换对应的中文和英文输入法

但是，我尝试使用不生效。
之后，想到一种曲线救国的方式：
type类型为password的输入框，在focus时会自动切换为英文输入法，但文字会加密显示。我的实现方式是，默认输入框的type类型为password，监听input的focus事件，在focus时，修改Input的type值为text，功能实现，以下是代码：vue + ant design vue项目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// html
<a-input-search v-model="qcdata"
    size="large"
    placeholder="请扫码"
    enter-button="查询"
    :type="inputType"
    @search="onQcSearch"
    @focus="onSearchFocus" />
// js
data() {
    return {
        inputType: 'password'
    }
}
onSearchFocus(){
    setTimeout(() => {
        this.inputType = 'text'
    }, 0)
}