让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;
}
效果图:

让input框只输入英文_第1张图片

你可能感兴趣的:(javascript,css,前端)