解决:扫描枪 input 输入框因为输入法中英文导致的问题

项目:VUE框架、element-ui

项目需求:需要使用扫描枪去扫描二维码进行查询核销,因为核销码是数组字母随机组合,在使用中文输入法的情况下会产生汉字等丢失字符(因为扫描枪相当于键盘键入事件)

解决:采用 input 的 password 密码框可以解决输入法中英文问题,但是无法明文显示,所以使用另一个正常且无边框的 input 遮挡住密码框的非明文部分,然后两个输入框采用双向绑定。

因为核销码是数字字母随机组合的八位数字,所以我们举例,随机核销码为:dh2u1ye78

当扫描枪扫描该二维码后,如果输入法是中文,相当于键盘一次敲击dh2u1ye78 然后在按一个回车键确认,最后结果如下图所示:

 为了避免上述问题,所以最后采用了input 的 password 密码框解决该问题

 下述代码为当时候场景使用的结构和样式:

<div class="top">
    <el-form-item label="核销码:" class="inputbox">
        <el-input v-model="input
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值