场景
由于业务上需要使用扫码器,在中文输入法下输入会导致扫码枪输入内容不准确
网络现有解决方案
使用inputmode
inputmode
可以设置虚拟键盘类型,但是由于是电脑设备,此方案失败
使用ime-mode 样式禁用输入法
ime-mode: disabled;
此方案在chrome浏览器上不支持
使用键盘监听
键盘监听发现无法屏蔽输入法,在手动输入和扫码输入都支持的情况下,手动输入输入法依然存在。
先聚焦密码框再聚焦输入框
由于浏览器会在输入框是密码框的时候强制改为英文输入法,在界面上增加不可见密码框,再聚焦输入框来切换输入法,经过实测根据输入框切换,失败。
解决过程
- 回忆密码组件切换输入框
type="text"
和密码框type="password"
时,输入法未切换成中文(俺寻思,这写组件的人这么厉害,赶紧下下来学习一下) - 阅读源码未发现特殊处理(我去,是我太菜了吗?我觉得我都看懂了)
- 对组件进行各种输入测试,发现当密码组件初始设置为输入框而非密码框时,输入法为中文(恍然大悟,我真是天才)
- 聚焦时将输入框改为密码框再改为输入框,测试成功
解决方法
在输入时先将输入框改为密码框再改为输入框,此方法利用chrome浏览器特性(bug?)在131版本可以使用其他版本未经测试,应用领域有限(其他版本不保证,估计也不会修这种),可以结合前面方式一起使用
/**@type {HTMLInputElement} */
let input = null//获取输入框
input.setAttribute("type", "password")
//中间可以进行聚焦之类的
input.setAttribute("type", "text")