1.首先我们在html中写入一个输入框和一个按钮，分别给它们一个id来连接js。
<body>
<input type="password" name="" id="pwd"/>
<input type="button" id="btn" value="点击显示"/>
</body>
2.可以通过event事件中的onmousedown、onmouseup来触发鼠标按下和松开的事件
onmousedown 某个鼠标按键被按下
onmouseup 某个鼠标按键被松开
当type = "password"时输入的内容为******；
当type = "text"时输入的内容为明文。
下面是js的代码：
<script type="text/javascript">
//获得按钮控件
var btnin = document.getElementById("btn")
//鼠标按下时触发的事件
btnin.onmousedown = function(){
//获得输入框控件
pwdin = document.getElementById("pwd")
//改变输入框内容
pwdin.type = "text"
}
//鼠标松开时触发的事件
btnin.onmouseup = function(){
//改变输入框内容
pwdin.type = "password"
}
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>
