首先要说明原理:
1.input:text框让他层级最高,这边要设置透明度,这样保证遮盖的盒子操作的box-shadow能看的到,让文字的color设为背景色一致,这里设置为白色,在这样就看不到默认的字了
2.然后是给一个盒子来存放输入的框,就是6个虚拟的密码框,来显示你输入的个数
3.每个密码框里面另外存放一个小盒子,背景色为黑色,border-radus设为50%,令其为圆形,模拟输入的密码
这边的意思大概这样,其他需要通过js来操作效果
全部代码奉上(本文参考http://www.qdfuns.com/notes/13457/2212f3d3af79179f3275dc5b7c0282e3.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
margin: 0;
padding:0;
}
.paycontainer{
margin: 20px 100px;
background-color: pink;
position: relative;
}
.paypasswordcontainer{
width: 300px;
height: 46px;
font-size: 12px;
position: absolute;
color: #ffffff;
z-index:9;
opacity:0.2;
-webkit-user-select: initial; /*取消禁用选择页面元素*/
background-color: #ffffff;
outline:none;
}
.sixpassword{
width: 300px;
height: 22px;
position: absolute;
top:1px;
left:1px;
padding:13px 0;
cursor: text;
background: #fff;
border-radius: 5px;
}
.sixpassword i{
display: inline-block;
width: 49px;
height: 22px;
border-left: 1px solid #cccccc;
float: left;
}
.sixpassword i:first-child{
border-left:0;
}
.sixpassword i.active{
background: url("https://t.alipayobjects.com/images/rmsweb/T1nYJhXalXXXXXXXXX.gif") no-repeat 60% center;
}
.sixpassword b{
width: 7px;
height: 7px;
background-color: #000;
display: block;
margin: 7px auto;
display: none;
border-radius: 50%;
}
.guanbiao{
width: 48px;
height: 46px;
display: block;
position: absolute;
display: block;
left: 0px;
top: 0px;
border: 1px solid #00ffff;
border-radius: 5px;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) ;
}
</style>
<body>
<div class="paycontainer">
<input type="password" minlength="6" maxlength="6" class="paypasswordcontainer"
oncontextmenu="return false" onpaste="return false" oncopy="return false"
oncut="return false" autocomplete="off">
<div class="sixpassword">
<i class="active"><b></b></i>
<i><b></b></i>
<i><b></b></i>
<i><b></b></i>
<i><b></b></i>
<i><b></b></i>
<span class="guanbiao"></span>
</div>
</div>
<p></p>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
$(".paypasswordcontainer").keyup(function(){
$input_val=$(this).val();
$input=$input_val.length;
for (var x = 0; x <= 6; x++) {
$("p").html($input);
if ($input == 0) {
$(".sixpassword").find("i").eq(0).addClass("active").siblings("i").removeClass("active");
$(".sixpassword").find("b").css({"display": "none"});
$(".guangbiao").css({"left": 0});
}
else if ($input == 6) {
$(".sixpassword").find("b").css({"display": "block"});
$(".sixpassword").find("i").eq(5).addClass("active").siblings("i").removeClass("active");
$(".guangbiao").css({"left": 5 * 50});
}else{
$(".sixpassword").find("i").eq($input).addClass("active").siblings("i").removeClass("active");
$(".sixpassword").find("i").eq($input).prevAll("i").find("b").css({"display":"block"});
$(".sixpassword").find("i").eq($input).nextAll("i").find("b").css({"display":"none"});
$(".guanbiao").css("left",$input*50);
}
}
})
})
</script>
</html>
oncontextmenu="return false" onpaste="return false" oncopy="return false" oncut="return false" //此处是禁止密码复制粘贴的
autocomplete="off"//让浏览器不自动记录之前输入的值,很多时候，需要对客户的资料进行保密，防止浏览器软件或者恶意插件获取到 在写的时候遇到一个问题怎么也搞不定,朋友一句话就把我点醒了"行内块默认有间距",这个是格式化不了的,只能通过浮动解决
时间： 2024-10-24 09:35:16