前端屏蔽输入法（input输入框type=“password“显示明文）

小灰灰 2022-12-02 00:49 586阅读 0赞

# 背景 #

###       在项目中遇到扫描枪扫描二维码，二维码内容由数字和字母组成，使用一般input输入框时，有时会调用本地的输入法，导致扫出来会有各种问题，于是自己写了个，源码在这里分享给大家。 ###

# 解决方案 #

1、input输入框如果type=password能满足我们的需求，但是是密文，我们要明文显示，实现源码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>屏蔽输入法</title>
    </head>
    <style>
      body{
        background-color:rgb(220, 220, 255);
      }
      #password,#clear{
        position: absolute;
      }
      #password{
        opacity: 0;
        border: 0px;
        width: 1px;
        z-index: 999;
      }
      #clear{
        outline: none;
        color:rgb(214, 124, 6);
        width: 95%;
        background-color: rgba(255, 255, 255, 0.2);
        border: none;
        height: 40px;
        text-indent: 15px;
        border-radius: 5px;
      }
    </style>
    <body>
        <input type="password" id="password"/>
        <input type="text" placeholder="请扫描输入内容" id="clear" />
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
    //聚焦clear
    $('#clear').focus();
    //监听clear输入框
    $('#clear').bind('input propertychange', function()
    {
      //聚焦password
      $('#password').focus();
      //将clear赋值给password
      $('#password').val($("#clear").val());
      //延迟200毫秒聚焦clear
      setTimeout(function(){
                $("#clear").focus();
            }, 200)
    })
    //监听password输入框
    $('#password').bind('input propertychange', function()
    {
      //将password赋值给clear
      $('#clear').val($("#password").val());
      //延迟200毫秒聚焦clear
      setTimeout(function(){
                $("#clear").focus();
            }, 200)
    })
     </script>
    </html>