手机端密码键盘（weiKeyBoard.js）

背景

公司最近项目上要做手机端支付，支付时需要使用自定义键盘。网上找了些，没找到称心如意的，看时间还算充裕就自己写了个。

功能描述

样式上与微信的密码键盘一样。
当前版本1.0。
数字位置可设定为随机。
文本控件上显示的内容可以为假值。
下面是在谷歌浏览器移动端调试模式下的截图。

下载及内容讲解

点击此处下载
直接运行包内的index.html即可。

调用方式

此插件使用面向对象的方式进行调用。
声明对象时需要传入四个参数。

var keyBoard =new  weiKeyBoard($("#inPwd"),true,false,6);

参数：

序号	参数名	默认值	说明
1	$ele	无	指明文本控件的jquery对象。点击密码键盘按钮时将自动将值输入到此文本控件
2	isRandom	false	数字键是否随机显示
3	isShowRealValue	false	是否在文本控件中显示真实值。考虑到安全性，可以在文本控件显示随机值
4	maxLength	无	可输入值最大长度。为0和不指明时，将不限制数量。

方法或事件

方法名	方法参数	返回值	说明
createKeyBoard	无	无	创建新的密码键盘。
getRealValue	无	点击键盘后累计的值	获取多此点击键盘后累计的真实值。

createKeyBoard()

keyBoard.createKeyBoard();

getRealValue()

keyBoard.getRealValue()

事件

事件名	参数	说明
onKeyPress	realVal:真实值 randomValue：假值	键盘按钮点击事件。注意：声明此事件后，将不会为控件赋值。事件内不能有alert等具有阻断效果的代码，否则点击按钮后按钮颜色将不会还原。

onKeyPress

//声明此事件后，将不会为控件赋值keyBoard.onKeyPress = function (realVal,randomValue) {//注意：此处不能为alert()。否则按钮点击后将不会恢复原来颜色。console.log("真实值："+realVal+",随机假值"+randomValue);}

联系我
- 如果有问题或疑问，可发邮件到 weigeweiwu@live.com联系我。

手机端密码键盘（weiKeyBoard.js）相关推荐

3d全景手机端导航菜单js特效
下载地址使用 three 和webAPP全屏模式制作手机端全景菜单,点击弹窗详情内容效果.支持360度旋转拖拽展示,点击菜单弹出文本内容.这是一款酷炫科技感的手机全景菜单展示特效. dd:
apk解密工具_手机端操作| Auto.js一键解密/一键加密工具免费分享
? 关注『掌玩小子』带你『体验极客』 1 在之前的博文中,我前后分享了Auto.js相关的加密解密的文档,如<Auto.js Pro离线打包源代码加密算法分析><来给你代码!A ...
手机端操作| Auto.js一键解密/一键加密工具免费分享
在之前的博文中,我前后分享了Auto.js相关的加密解密的文档,如<Auto.js Pro离线打包源代码加密算法分析><来给你代码!Auto.js js转.class具体代码过程& ...
html适应各个手机端页面的js
1.首先定义一个换算函数 function getRem(pwidth, prem) {var html = document.getElementsByTagName("html" ...
JS 判断是否是手机端并跳转操作
JS 判断运行当前脚本的应用程序是否为手机端或者一些其他信息,在我的工作中遇到的不是十分频繁,被我的同事一问就给问住了,所以把之前找到的一些知识点整理出来,供大家参考,若哪里不对欢迎指出,我会及时的更 ...
html城市手机搜索,原生js实现html手机端城市列表索引选择城市
本文实例为大家分享了js实现手机端城市列表索引选择城市的具体代码,供大家参考,具体内容如下 html部分: 定位城市上海市 css部分: *{ margin: 0; padding: 0; list ...
php 手机端播放器,用JS代码适配电脑端和手机端播放器代码
用JS代码适配电脑端和手机端播放器代码蓝叶网站设计 2016-08-10 10668 9评论随着html5的崛起,很多网站都采用html5代码来设计,让网站美观大气,但是 ...
vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
Node.js+Vue.js全栈开发王者荣耀手机端官网和管理后台(一)
文章目录 [全栈之巅]Node.js+Vue.js全栈开发王者荣耀手机端官网和管理后台(一) 工具安装和环境搭建初始化项目基于ElementUI的后台管理基础界面搭建创建分类(客户端) 创建分类 ...

手机端密码键盘（weiKeyBoard.js）

背景

功能描述

下载及内容讲解

调用方式

手机端密码键盘（weiKeyBoard.js）相关推荐

最新文章

热门文章