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

最新推荐文章于 2025-03-06 14:46:25 发布

乐乐姐

最新推荐文章于 2025-03-06 14:46:25 发布

阅读量1.1w

点赞数 1

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

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

版权

前端专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

写作时间：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 = {};
            Object.defineProperty(obj, 'txt', {
                get: function () {
                    return obj;
                },
                set: function (newValue) {
                    document.getElementById("password").value = newValue;
                    document.getElementById('text').value = newValue;
                   
                }
            });
            document.getElementsByClassName("pad-input")[0].addEventListener('keyup', function (e) {
                obj.txt = e.target.value;
            });
        </script>
    </body>
</html>
<!--其中e代表键盘监听事件抬起键盘的那个指定的建-->

复制以上代码，自己尝试下每个的效果。发现如下：

1、单纯的text文本框，是可以输入汉字的；

2、单纯的password密码框，是不能输入汉字，但是不会明文显示的；

3、在每次键盘“抬起事件”后，将password的值传给text，text可以正确显示。

至此，已经离完全解决问题很近了，此时，只要将标签重叠，使效果像只会明文显示的密码框。

最终解决：只用绝对定位（当然，如果项目中使用table的td放input也是一样的），自己加一写适合项目的style即可。demo如下：

<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>Image preview example</title>
</head>
<body>
     <div style="position: relative;width: 200px;">
           <input name="password" autocomplete="off" hidden id="password">
           <input type="password" autocomplete="off" class="pad-input" style="height: 30px;width: 100%;">
           <input placeholder="请输入密码"  id="show" type="text" style="position: absolute;left: 3px;top:50%;transform: translate(0,-50%);border: none;height: 28px;pointer-events: none;background: #fff;width: 98%;" disabled>

    </div>
    <input type="text">

    <script>
        var obj = {};
        Object.defineProperty(obj, 'txt', {
            get: function () {
                return obj;
            },
            set: function (newValue) {
                document.getElementsByClassName("pad-input")[0].value = newValue;
                document.getElementById('show').value = newValue;
                document.getElementById('password').value = newValue;
            }
        });
        document.getElementsByClassName("pad-input")[0].addEventListener('keyup', function (e) {
            obj.txt = e.target.value;
        });
    </script>
</body>
</html>

此时，问题已经解决了，一直到自己项目即可。这时候会有人有疑问了：都是监听单个键之后就立刻传值，那还有必要用password吗，就算是中文输入法，也是单个键抬起后就传递了啊。

好，我们做个例子看下，

<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
        <title>Image preview example</title>
    </head>
    <body>
         <div style="position: relative;width: 200px;">
               <input type="password" autocomplete="off" class="pad-input" style="height: 30px;width: 100%;">
               <input placeholder="请输入密码"  id="show" type="text"  disabled>
               <br/>文本框<input type="text" id="test">
               <br/>密码框<input type="password">
        </div>
        

        <script>
            var obj = {};
            Object.defineProperty(obj, 'txt', {
                get: function () {
                    return obj;
                },
                set: function (newValue) {
                    document.getElementsByClassName("pad-input")[0].value = newValue;
                    document.getElementById('show').value = newValue;
                    document.getElementById('test').value = newValue;
                   
                }
            });
            document.getElementsByClassName("pad-input")[0].addEventListener('keyup', function (e) {
                obj.txt = e.target.value;
            });
            document.getElementById("test").addEventListener('keyup',function(e){
                obj.txt = e.target.value;
            });
        </script>
    </body>
</html>