让input框只输入英文

解决扫码枪在中文输入法时扫码冲突

扫码枪在扫完码时会自动回车，这时如果是中文输入法就会触发输入法联想，再加一个回车，那么input框输入的就成中文了。如果可以控制input框切换英文输入法输入英文那就好了。css有一个属性（ime-mode）轻松就可以解决，但可惜的是该属性只能在IE浏览器有效，webkit内核浏览器不支持，放弃！

<input type="text" style="ime-mode:disabled"/>

文本框当type=password时，输入法就是英文，但是显示的是一堆点点点。所以要想办法让用户在password框中输入英文，但是看到的确是正常的文本框。

思路：

1、分两层，底层是一个password文本框，在它正上方放一个div用于显示输入的内容；

2、password文本框的字体设成白色或者透明，重新设置光标颜色；

3、使用pointer-events: none让div的鼠标事件穿透到input框产生focus事件；

4、使用等宽字体monospace让光标闪烁的位置符合预期

代码如下，基于elementUI

html

<el-form ref="formRingCode" :inline="true" :model="formRingCode" :rules="rules" @submit.native.prevent>
        <el-form-item label="手环码" prop="ringCode">
          
          <el-input name="wristbandCode" type="password" style="display: none" />
          <el-input ref="ringCode" v-model="formRingCode.ringCode" :maxlength="8" type="password" placeholder="请将光标聚焦于此，等待读取手环" class="w350 input-original" />
          <div class="w350 input-backup">{{ formRingCode.ringCode }}div>
        el-form-item>
el-form>

css

.input-backup{
  position: absolute;
  left: 0;
  pointer-events: none;
  border-radius: 4px;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  font-family: monospace;
}
.input-original input{
  color: white;
  caret-color: #606266;
  font-family: monospace;
  &::placeholder {
    font-family: Helvetica Neue;
  }
  &::selection{
    color: white;
  }
}
.w350{
  width: 350px;
}

效果图：