请教前端大神们一个问题，如何限定一个输入框，一定是英文输入状态?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1281 天前的主题，其中的信息可能已经有所发展或是发生改变。

背景: 电脑连接扫码枪，扫码录入，中文状态下录入异常(慢+换行错误)，英文输入法下，录入正常。

期望的效果: 只要输入框获取焦点，输入法自动切换为英文。

录入

扫码

输入

英文

16 条回复 • 2021-05-11 09:03:33 +08:00

0TSH60F7J2rVkg8t

2021-05-08 17:40:43 +08:00

<input type="text" name="name" value="initial value" style="ime-mode: disabled">.
说明来自这里： https://developer.mozilla.org/zh-TW/docs/Web/CSS/ime-mode

uniy

2021-05-08 17:47:26 +08:00

@ahhui ime-mode is deprecated, 并且大部分浏览器已经不支持了，https://developer.mozilla.org/en-US/docs/Web/CSS/ime-mode

devld

2021-05-08 17:47:50 +08:00

自定义一个假的”输入框“，监听 `keydown` 事件，只处理合法的字母数字键？

zhaoy

2021-05-08 17:55:26 +08:00

强答，刚查的

https://developer.mozilla.org/zh-TW/docs/Web/CSS/ime-mode

```html
<input style="ime-mode:auto" />
<input style="ime-mode:active" />
<input style="ime-mode:inactive" />
<input style="ime-mode:disabled" />
```

试试看，Chrome 、Edge 、好像不行，IE 可以，火狐有效效果不完整

zhaoy

2021-05-08 17:57:43 +08:00

https://caniuse.com/?search=ime-mode

红了一大片

uniy

2021-05-08 18:01:58 +08:00

@zhaoy 要的就是 ime-mode 的效果，但是浏览器对这个支持不友好

christin

2021-05-08 18:09:22 +08:00 via iPhone

前端应该不能直接判断输入法状态吧得有输入才能做判断
我提供一个思路输入框做 input 检测有中文就 alert 提醒转换为英文输入法

gaoryrt

2021-05-08 18:25:49 +08:00

input pattern 可以正则

gaoryrt

2021-05-08 18:28:01 +08:00

或者是 inputmode 可以控制虚拟键盘类型

sixway

2021-05-08 19:53:33 +08:00

我比较好奇为啥中文输入法会出现异常。

vinsony

2021-05-08 20:12:52 +08:00 via Android

前面放个透明的密码框

heyjei

2021-05-08 22:13:50 +08:00

@vinsony 这个主意棒，选中密码框时，输入法自动变成了英文了。

uniy

2021-05-10 11:02:33 +08:00

@vinsony 这个是比较好的方案，但是不是所有的电脑都能够起作用

uniy

2021-05-10 11:06:31 +08:00

@devld 这种不会改变输入法，而且条码内容不是固定的

gdrk

2021-05-11 09:00:09 +08:00

IE 和 Firefox 可以用 ime-mode: disabled，但是 Chrome 似乎并没有打算支持
https://developer.mozilla.org/en-US/docs/Web/CSS/ime-mode
因为 password 就可以默认英文输入法，用 password 模拟(手机端还不错，桌面端不能显示光标--https://codepen.io/gdrk/pen/KOaZxy

gdrk

2021-05-11 09:03:33 +08:00

@gdrk 光标可以显示，示例里 css 去掉了。但是我映像里是有个不影响功能的小 bug，时间太久忘了。。。