这篇博客介绍了一种实现方式，使得在HTML中输入框type=password类型下仍能以明文显示输入内容。通过CSS和JavaScript代码，创建了一个透明的password输入框和一个clear输入框，实现了密码明文显示并保持输入同步的效果。同时，代码中包含了焦点切换和输入事件监听以确保用户体验。
1、input输入框如果type=password能满足我们的需求，但是是密文，我们要明文显示，实现源码如下：
屏蔽输入法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;
}
//聚焦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)
})
扫一扫
5185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
