扫描枪中文输入法导致乱码问题

最新推荐文章于 2024-05-17 14:32:46 发布

高季左

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量4k

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/Henry_rwy/article/details/126665313

版权

中文输入法前提下用扫描枪会导致英文的字符串经过扫描枪的回车事件后变成中文，用password类型可以屏蔽掉中文输入，然后再文本框后面追加一个回线，让password框看起来像文本框，通过css的定位来进行遮罩并把password的值赋给遮罩的文本框。

这里借鉴其它网友的处理，贴下代码

<!DOCTYPE html>
<html lang="zh_CN">
<meta charset="utf-8">
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>lalalala</title>
</head>
<style>
    #show:after{
        content: "";
        display: inline-block;
        height: 18px;
        position: relative;
        border-right: solid 1px #666;
        top: 4px;
        left: 0px;
        opacity: 0;
    }
    .pad-input:focus + #show:after{
        animation: mymove 1.2s infinite;
    }

    @keyframes mymove
    {
        0%   {opacity: 0;}
        25%  {opacity: 0;}
        75%  {opacity: 1;}
        100% {opacity: 0;}
    }
</style>
<body>
<div style="position: relative;width: 200px;">
    <input type="password" autocomplete="off" class="pad-input" style="height: 30px;width: 100%;">
    <div id="show" style="position: absolute;left: 2px;top:50%;transform: translate(0,-50%);border: none;height: 28px;pointer-events: none;background: #fff;width: 98%;" disabled>
        <span></span>
    </div>
</div>
<script>
    var obj = {};
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj;
        },
        set: function (newValue) {
            document.getElementById('show').getElementsByTagName('span')[0].innerHTML  = newValue;
        }
    });
    document.getElementsByClassName("pad-input")[0].addEventListener('keyup', function (e) {
        obj.txt = e.target.value;
    });
</script>
</body>
</html>