html5+css實現六位數字密碼輸入對話方塊(類似支付寶,微信)
阿新 • • 發佈:2019-01-07
先來看看原型圖:
直接上程式碼:
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{}
.common-part{ position: fixed; width: 100%; height: 100%; top: 0; background-color: #000000; /*父塊透明,子塊不透明,用rgba*/ background: rgba(0,0,0,0.3); } .common-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的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.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="https://t.alipayobjects.com/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');
}
}