解决中文状态下扫描枪扫描错误

最新推荐文章于 2024-05-24 14:14:20 发布

乐乐姐

最新推荐文章于 2024-05-24 14:14:20 发布

阅读量1w

点赞数 1

分类专栏：前端文章标签： html 扫描枪 input text password

本文链接：https://blog.csdn.net/qq_20735197/article/details/102956029

版权

本文介绍了在中文状态下使用扫描枪输入导致错误的问题及解决思路。问题在于扫描枪模拟键盘输入时，中文状态下可能会输出错误字符串。解决方案是通过设置input类型为password，配合text input显示明文，并在键盘抬起事件后传递值，实现既能防止中文输入又能显示明文的效果。此外，还探讨了中文输入法对键盘监听事件的影响。

摘要由CSDN通过智能技术生成

解决中文状态下扫描枪扫描错误

写作时间：2019-11-7 11:05:39

问题描述

今天项目上遇到反馈过来的问题：前端input输入去后台核对时，使用键盘输入核对成功，使用扫描枪输入核对失败。原因很明显：扫描枪扫出来的字符串肯定是错误的。

后续跟进反馈，中文状态下扫描枪出现这种问题。

大概猜测下，中文状态下扫描快递包裹，比如中通快递单号为：
$Z T 103838237398$
首先说明下扫描枪的原理：完全模拟键盘输入！也就是说，扫描出来的字符串也是逐个进行输出，也是有键盘的所有监听事件的。

再看上面的快递单号：中文状态下”ZT1“会输出什么？

在这里插入图片描述

以上也只是猜测，因为没有实际的扫码枪。但是问题还是需要解决的。

解决思路

解决思路1：不让输入中文！

<input type="text">

更改为

<input type="password">

可以完全解决输入中文的问题，但是不能显示明文。再加入一个text的input框，用于显示输入，password涌入接收输入。监听键盘按下或者抬起事件，每次时间后都把输入值从password传给text显示。具体代码如下：

<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
        <title>扫描枪中文状态输入汉字问题</title>
    </head>
    <body>
        <input type="password" id="password" >
        <input placeholder="请输入密码"  id="text" type="text"  disabled>
        <br/>文本框<input type="text" >
        <br/>密码框<input type="password">
        
        <script>
            var obj = {
    </

最低0.47元/天解锁文章

乐乐姐

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
解决中文状态下扫描枪扫描错误

解决中文状态下扫描枪扫描错误写作时间：2019-11-7 11:05:39问题描述今天项目上遇到反馈过来的问题：前端input输入去后台核对时，使用键盘输入核对成功，使用扫描枪输入核对失败。原因很明显：扫描枪扫出来的字符串肯定是错误的。后续跟进反馈，中文状态下扫描枪出现这种问题。大概猜测下，中文状态下扫描快递包裹，比如中通快递单号为：ZT103838237398ZT103838237...
复制链接

扫一扫

专栏目录