h5仿支付寶微信支付鍵盤、紅包數字鍵盤

如今的很多app的支付、輸入密碼等功能,都已經開始使用自定義數字鍵盤,不僅使用方便,而且效果挺精緻,關鍵是可自由修改定製,這幾天也試著利用H5 css3 jQ開發了下仿微信支付鍵盤。

<!-- …… 充值彈窗模板.Start -->
<div class="wc__walletPanel-tmpl">
<!-- //充值模板.begin -->
<div id="J__popupTmpl-Recharge" style="display:none;">
<div class="wc__popupTmpl tmpl-recharge">
<i class="wc-xclose"></i>
<ul class="clearfix">
<li class="item">
<div class="itembox flexbox wc__borB" id="J__selectBank">
<label class="txt bankLbl">儲蓄卡</label>
<div class="flex1"><p class="bankName">中國銀行</p><p class="bankQuota">單日交易限額¥20000.00</p></div>
</div>
</li>
<li class="item">
<div class="itembox wc__borB">
<label class="txt">充值金額</label>
<div class="pt-15 flexbox"><b class="unit">¥</b><input class="ipt-txt flex1" type="text" name="rechargeAmount" readonly /></div>
</div>
</li>
</ul>
</div>
</div>
<!-- //充值模板.end -->
</div>
/* ...充值事件.start */
$("#J__wcRecharge").on("click", function(){
var rechargeIdx = wcPop({
id: 'bankRecharge',
skin: 'ios',
content: $("#J__popupTmpl-Recharge").html(),
style: 'background-color: #fff; max-width: 320px; width: 95%;',
shadeClose: false,
btns: [
{
text: '下一步',
style: 'background:#ffba00;color:#fff;font-size:18px;',
onTap() {
var money = $("#bankRecharge input[name='rechargeAmount']").val();
if(!money) return;
alert(money);
wcPop.close(rechargeIdx);
}
}
]
});
});
// 充值金額
$("body").on("click", "#bankRecharge input[name='rechargeAmount']", function (e) {
var obj = $(this);
wcKeyBoard({resId: obj});
document.activeElement.blur();
});
/* ...充值事件.end */
// ...關閉
$("body").on("click", ".wc__popupTmpl .wc-xclose", function () {
wcPop.close();
});

效果圖如下:





歡迎大家一起交流學習  企鵝號:(282310962) wx:(xy190310)