当前位置:首页 » HTML/CSS

h5仿微信支付键盘、数字键盘

2018-05-02 08:21 本站整理 浏览(17)

这几天一直在开发h5仿微信聊天功能,里面刚好用到了一个金额输入,如是就写了个仿微信支付键盘,功能都能实现,调用也相当方便。

 

<!-- …… 充值弹窗模板.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>

 

// 充值金额
$("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();
});

 


 
 ——>>>如需转载请注明原处  QQ:282310962    微信:xy190310