html5+css实现六位数字密码输⼊对话框（类似⽀付宝，微
信）
先来看看原型图：
直接上代码：
html
<div class="common-part pay-part">
<div class="common-dialog pay-dialog">
<div class="dialog-title">请输⼊⽀付密码</div>
<div class="pay-money">$10000.00</div>
<div class="pay-password">
<input type="tel" maxlength="6" class="real-ipt">
<div class="surface-ipts">
<div class="surface-ipt">
<input type="password" >
<input type="password" >
<input type="password" >
<input type="password" >
<input type="password" >
<input type="password" >
</div>
</div>
</div>
<div class="btns">
<button class="cancel-btn">取消</button>
<button class="confirm-btn">付款</button>
</div>
</div>
</div>
这⾥代码分为了两层input输⼊框
底层是type=tel（0-9），设置透明opacity: 0;
表层是type=password。
css{}
mon-part{
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: #000000;
/*⽗块透明，⼦块不透明，⽤rgba*/
background: rgba(0,0,0,0.3);
}
mon-dialog{
width: 7.2rem;
text-align: center;
position: absolute;
background: #ffffff;
z-index: 2;
opacity: 1;
border-radius: .1rem;
border: 1px solid #f2f2f2;
left: calc(50% - 3.6rem);
left: -moz-calc(50% - 3.6rem);
left: -moz-calc(50% - 3.6rem);
left: -webkit-calc(50% - 3.6rem);
top: 3rem;
}
.pay-part{
display: none;
}
.pay-dialog{
height: 6.9rem;
}
.dialog-title{
height: 1.5rem;
line-height: 1.5rem;
color: #333333;
font-size: .48rem;
border-bottom: 1px solid #f2f2f2;
}
.pay-money{
color: #333333;
font-size: .6rem;
margin: .6rem 0;
font-weight: bold;
}
.pay-password{
width: 6.6rem;
height: 1.2rem;
border: 1px solid #999999;
margin: 0 auto;
position: relative;
}
.pay-password .real-ipt{
position: absolute;
top: 0;
left: 0;
width: 100%;给老师的祝福
height: 1.2rem;
line-height: 1.2rem;
opacity: 0;
z-index: 3;
英雄杀商鞅怎么玩}
.pay-password .surface-ipts{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1.2rem;
line-height: 1.2rem;
z-index: 1;
overflow: hidden;
}
.pay-password .surface-ipts .surface-ipt{
height: 1.2rem;
line-height: 1.2rem;
display: flex;
justify-content: space-between;
}
.pay-password .surface-ipts .surface-ipt input{ width: 1.1rem;
height: 1.12rem;
line-height: 1.12rem;
border: 0;
border-right: 1px solid #999999;
color: #333333;
font-size: .9rem;
text-align: center;
padding: 0;
padding: 0;
}
.pay-part .btns{
margin: .48rem 0;
}
.cancel-btn{
width: 3rem;
height: 1.2rem;
line-height: 1.2rem;
background: url("../res/h5tel_btn_blueline_300x120.png") center no-repeat; background-size: 100%;
color: #2ea7e0;
font-size: .42rem;
border: none;
}
.confirm-btn{
width: 3rem;
height: 1.2rem;
line-height: 1.2rem;
background: url("../res/h5tel_btn_blue_300x120.png") center no-repeat;
background-size: 100%;
color: #ffffff;
font-size: .42rem;
border: none;
margin-left: .6rem;
}
js
$(".buy-confirm").on("click", function () {
// 打开⽀付密码对话框并⽣成订单异地恋情人节怎么过
$('.pay-part').css("display", "block");
})
$(".cancel-btn").on("click", function () {
$('.pay-part').css("display", "none");
$inputs.each(function () { //input清空
$(this).val("");
})
pwd = "";
$(".real-ipt").val("");
dnf没频道
})
$(".confirm-btn").on("click", function () {
console.log("password:" + pwd);
if (len === 6 && pwd) { //付款
// $.toast("密码错误")
window.location.href = 'activity_buy_result.html'
} else {
$.toast("请输⼊⽀付密码")
}
})
var pwd = "";
var len = 0;
// type=tel input框
病假工资如何计算var $inputs = $(".surface-ipt input");
$(".real-ipt").on("input", function () {
if (!$(this).val()) { //⽆值
}
if (/^[0-9]*$/g.test($(this).val())) { //有值且只能是数字（正则）
pwd = $(this).val().trim();
len = pwd.length;
for (var i in pwd) {
$inputs.eq(i).val(pwd[i]);
$inputs.eq(i).val(pwd[i]);
}
$inputs.each(function () { //将有值的当前input 后⾯的所有input清空
var index = $(this).index();
if (index >= len) {
$(this).val("");
}
})
if (len === 6) {
//执⾏付款操作
}
} else { //清除val中的⾮数字，返回纯number的value
var arr = $(this).val().match(/\d/g);
try {
$(this).val($(this).val().slice(0,$(this).val().lastIndexOf(arr[arr.length-1])+1));
} catch(e) {
// console.ssage)
//清空
$(this).val("");
}
}
console.log("password:" + pwd);
关于元旦的短信
})
// 获取焦点事件避免输⼊键盘挡住对话框
$('.real-ipt').on('focus', function () {
$('.pay-dialog').css('top','1rem')
})
$('.real-ipt').on('blur', function () {
$('.pay-dialog').css('top','3rem')
})
⽤到了jQuery
最后完成效果如图：
--------------------------------------------------------------------
如需在输⼊框加光标显⽰，可采⽤img的⽅式
<div class="ipt-active-nick"><img src="t.alipayobjects/images/rmsweb/T1nYJhXalXXXXXXXXX.gif"></div>
.ipt-box-nick .ipt-active-nick {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.ipt-box-nick .ipt-active-nick img {
vertical-align: middle; }
if(!$(this).val()){//⽆值光标顶置
$('.ipt-active-nick').css('left',$input.eq(0).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
}
//
for (var i = 0, len = pwd.length; i < len; i++) {
$input.eq(i).val(pwd[i]);
if($input.eq(i).next().length){//模拟光标，先将图⽚容器定位，控制left值
$('.ipt-active-nick').css('left',$input.eq(i+1).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px'); }
}
上传了⼀个有光标的
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论