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;
}
}