h5 imitation WeChat payment keyboard, numeric keyboard

In the past few days, I have been developing the h5 imitation WeChat chat function, which happened to use an amount input. If so, I wrote an imitation WeChat payment keyboard, the functions can be realized, and the call is quite convenient.

 

<!-- …… Recharge popup template.Start -->
<div class="wc__walletPanel-tmpl">
	<!-- //Recharge template.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">Deposit card</label>
						<div class="flex1"><p class="bankName">Bank of China</p><p class="bankQuota">Single-day transaction limit ￥20000.00</p></div>
					</div>
				</li>
				<li class="item">
					<div class="itembox wc__borB">
						<label class="txt">Deposit amount</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>
	<!-- //Recharge template.end -->
</div>

 

// Recharge amount
$("body").on("click", "#bankRecharge input[name='rechargeAmount']", function (e) {
	var obj = $(this);
	wcKeyBoard({resId: obj});
	document.activeElement.blur();
});
/* ...recharge event.end */

// ...closure
$("body").on("click", ".wc__popupTmpl .wc-xclose", function () {
	wcPop.close();
});

 

 
 ——>>>If you need to reprint, please indicate the original place QQ: 282310962 WeChat: xy190310