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>
网友评论