1、input輸入框如果type=password能滿足我們的需求,但是是密文,我們要明文顯示,實(shí)現(xiàn)源碼如下:
<!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="請(qǐng)掃描輸入內(nèi)容" id="clear" />
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
//聚焦clear
$('#clear').focus();
//監(jiān)聽clear輸入框
$('#clear').bind('input propertychange', function()
{
? //聚焦password
? $('#password').focus();
? //將clear賦值給password
? $('#password').val($("#clear").val());
? //延遲200毫秒聚焦clear
? setTimeout(function(){
? ? ? ? ? ? $("#clear").focus();
? ? ? ? }, 200)
})
//監(jiān)聽password輸入框
$('#password').bind('input propertychange', function()
{
? //將password賦值給clear
? $('#clear').val($("#password").val());
? //延遲200毫秒聚焦clear
? setTimeout(function(){
? ? ? ? ? ? $("#clear").focus();
? ? ? ? }, 200)
})
</script>
</html>