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

最新推荐文章于 2024-08-04 11:18:11 发布

hongyu#ding

最新推荐文章于 2024-08-04 11:18:11 发布

阅读量4.8k

点赞数 2

分类专栏：好记性不如记事本文章标签： jquery js html5 css3

本文链接：https://blog.csdn.net/dinghongyu520/article/details/108281479

版权

好记性不如记事本专栏收录该内容

42 篇文章 4 订阅

订阅专栏

背景

在项目中遇到扫描枪扫描二维码，二维码内容由数字和字母组成，使用一般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>

hongyu#ding

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
前端屏蔽输入法（input输入框type=“password“显示明文）

背景在项目中遇到扫描枪扫描二维码，二维码内容由数字和字母组成，使用一般input输入框时，有时会调用本地的输入法，导致扫出来会有各种问题，于是自己写了个，源码在这里分享给大家。解决方案1、input输入框如果type=password能满足我们的需求，但是是密文，我们要明文显示，实现源码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫