并不介意国王的新衣,
只因我身上,拓着同样的光荣。
场景
<input>
当一个普通的input,在中文输入法下,依次键入"e2",多半得到的是中文的“呃”/“额”/....
如果我们需要得到的是“e2”,又该如何?
实现
1. iem-mode
ime-mode:auto | normal | active | inactive | disabled
默认值:auto
适用于:所有输入文本框
其中disabled属性:完全禁用ime。对于有焦点的控件(如输入框),用户不可以激活ime
优点:完全符合预期效果
缺点:兼容性差,只有 IE6.0+/Firefox2.0+ 支持
<input style="ime-mode: disabled">
2. type="password"
新建一个type设置为password的input,覆盖原input,达到屏蔽中文输入法的目的。
(原理待整理)
**HTML**
<input id="test1" type="password" oninput="copyInput()">
<input id="test2">
**CSS**
#test1 {
position: absolute;
color: transparent;
background-color: transparent;
caret-color: black;
border: none;
outline: none;
padding: 2px;
}
**JS**
let copyInput = () => {
let val = document.querySelector('#test1').value
document.querySelector('#test2').value = val
}
(具体样式根据情况调整。如果使用现代框架,只需绑定同一数据源即可,无需JS。)
优点:兼容性好,可操作空间大
缺点:上层input光标与下层文字无法很好匹配(待进一步考察)
网友评论