前端屏蔽中文輸入法(input輸入框type=“password“顯示明文)

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>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容