h5仿微信、支付寶數字鍵盤|微信支付鍵盤|支付寶付款鍵盤
摘要：
html5仿微信支付數字鍵盤|仿支付寶鍵盤|h5仿微信密碼輸入鍵盤|自定義數字鍵盤
很早之前由於專案需求，就有開發過一個h5仿微信支付鍵盤，這幾天就把之前的數字鍵盤模組獨立出來，重新整理開發成demo，採用h5+原生js開發，含有微信、支付寶兩種鍵盤面板，可自定義普通鍵盤、最大值...
html5仿微信支付數字鍵盤|仿支付寶鍵盤|h5仿微信密碼輸入鍵盤|自定義數字鍵盤
很早之前由於專案需求，就有開發過一個 ofollow,noindex"> h5仿微信支付鍵盤 ，這幾天就把之前的數字鍵盤模組獨立出來，重新整理開發成demo，採用h5+原生js開發，含有微信、支付寶兩種鍵盤面板，可自定義普通鍵盤、最大值輸入限制、密碼鍵盤/電話號碼鍵盤驗證，一個頁面可初始化多個鍵盤且輸入互不衝突。
外掛使用相當方便，只需引入 <script src="wcKeyboard.js"></script>
// 賦值給input
$("#wcKeyboardInput01").on("click", function(){
wcKeyboard({
id: 'kbInput01',
selector: '#wcKeyboardInput01',
max: 99999.99,
shade: true,
anim: 'footer',
});
});
h5仿微信、支付寶鍵盤demo效果圖：
手機號碼輸入鍵盤，內建手機驗證規則：
// 輸入手機號碼
$("#wcKeyboardInput04").on("click", function(){
wcKeyboard({
id: 'kbInput04',
selector: '#wcKeyboardInput04',
type: 'tel',
complete: function(val){
alert("輸入的手機號碼：" + val);
},
shade: false,
anim: 'footer'
});
});
還支援支付寶數字鍵盤風格面板：
// 支付寶鍵盤風格
$(".wcKeyboardInput06").on("click", function(){
wcKeyboard({
id: 'kbInput06',
selector: '.wcKeyboardInput06',
max: 10000,
style: '',
skin: 'alipay',
shadeClose: false,
opacity: .2,
anim: 'fadeIn',
});
});
// 處理數字1-9
for (var o = _obj.getElementsByClassName("kb-number"), len = o.length, i = 0; i < len; i++)
util.touch(o[i], "click", function(e){
var text = res_obj.innerHTML + this.innerHTML;
if(!chkVal(text)) return;
res_obj.innerHTML = text;
setVal(res_obj.innerHTML);
});
// 處理小數點
var _float = _obj.getElementsByClassName("kb-float")[0];
util.touch(_float, "click", function(){
var text = res_obj.innerHTML;
if(text == '' || text.indexOf('.') != -1){
return;
}
res_obj.innerHTML = res_obj.innerHTML + this.innerHTML;
setVal(res_obj.innerHTML);
});
// 處理數字0
var _zero = _obj.getElementsByClassName("kb-zero")[0];
util.touch(_zero, "click", function(){
var text = res_obj.innerHTML + this.innerHTML;
if(!chkVal(text)) return;
res_obj.innerHTML = text;
setVal(res_obj.innerHTML);
});
// 處理刪除
var _del = _obj.getElementsByClassName("kb-del")[0];
util.touch(_del, "click", function(){
res_obj.innerHTML = res_obj.innerHTML.substring(0, res_obj.innerHTML.length - 1);
setVal(res_obj.innerHTML);
});