美文网首页
论input如何屏蔽中文输入法

论input如何屏蔽中文输入法

作者: MoonyPoet | 来源:发表于2019-04-24 23:44 被阅读0次

        并不介意国王的新衣,
        只因我身上,拓着同样的光荣。


    场景

    <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光标与下层文字无法很好匹配(待进一步考察)

    相关文章

      网友评论

          本文标题:论input如何屏蔽中文输入法

          本文链接:https://www.haomeiwen.com/subject/wqfogqtx.html