h5仿微信、支付宝数字键盘|微信支付键盘|支付宝付款键盘

发布日期:2019-01-10

html5仿微信支付数字键盘|仿支付宝键盘|h5仿微信密码输入键盘|自定义数字键盘

很早之前由于项目需求,就有开发过一个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-9for (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)})// 处理数字0var _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)})