您现在的位置是:网站首页> 内容页

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

  • 易盛娱乐3手机版
  • 2019-10-27
  • 45人已阅读
简介html5仿微信支付数字键盘|仿支付宝键盘|h5仿微信密码输入键盘|自定义数字键盘很早之前由于项目需求,就有开发过一个h5仿微信支付键盘,这几天就把之前的数字键盘模块独立出来,重新整理

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);});

 

文章评论

Top