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

2021-05-08 17:37:59 +08:00
 uniy

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

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

1766 次点击
所在节点    前端开发
16 条回复
ahhui
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
uniy
2021-05-08 18:01:58 +08:00
@zhaoy 要的就是 ime-mode 的效果,但是浏览器对这个支持不友好
christin
2021-05-08 18:09:22 +08:00
前端应该不能直接判断输入法状态吧 得有输入才能做判断
我提供一个思路 输入框做 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
前面放个透明的密码框
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,时间太久忘了。。。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/775708

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX