css web端中文输入模式下,确保英文输入

149 阅读1分钟

type 值为 password 的 input 输入框可确保在中文输入模式下获取到的值是英文;

叠加 type="password" 和 type="text" 的 input, password 类型处于上层,鉴于密码模式下获得的字符串都为*,较短;可通过letter-spacing属性调整间距,模拟文本模式下的输入。

<div className={selfStyles['enEnter']}>
  <Input
    className={selfStyles['enEnter-text']}
    prefix={<ScanOutlined />}
    style={{ width: 170 }}
    value={barcode}
  />
  <Input
    ref={barcodeRef}
    type="password"
    placeholder="请输入"
    className={selfStyles['enEnter-password']}
    style={{ width: 148 }}
    onChange={(v) => {
      setBarcode(v.target.value)
    }}
    value={barcode}
    autoFocus
  />
</div>
 .enEnter {
    position: relative;

    &-text {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 12px;
    }
    &-password {
      margin-left: 20px;
      color: transparent;
      font-size: 15px;
      font-family: Arial;
      letter-spacing: 2px;   //密码模式下,输入的值相较于其他模式,长度较小
      background-color: transparent;
      border: none;
      caret-color: #000;
    }
  }