html5+css实现六位数字密码输入对话框（类似支付宝，微信）

对话框（类似支付宝，微信）"/>

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: -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;
}
.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("");})$(".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.each(function () {  //将有值的当前input 后面的所有input清空var index = $(this).index();if (index >= len) {$(this).val("");}})if (len === 6) {//执行付款操作}} else {    //清除val中的非数字，返回纯number的valuevar arr = $(this).val().match(/\d/g);try {$(this).val($(this).val().slice(0,$(this).val().lastIndexOf(arr[arr.length-1])+1));} catch(e) {// console.log(e.message)//清空$(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=".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');}}

上传了一个有光标的demo(仿支付宝数字密码输入框)