JS实现六位字符密码输入器功能


Posted in Javascript onAugust 19, 2016

老规矩~ 上DEMO,过过瘾先:六位字符密码输入器

再上源码:六位字符密码输入器

从DEMO中我看可以看出,首先只能输入六个字符,并且仅允许输入数字,在输入六位数字完成之后会自动执行一个回调(DEMO中是将输入结果显示出来了)

一. 先说原理

首先呢,我们需要两个东东:其一是一个真是的输入框,即:真正处于焦点状态并获取用户输入的input;其二是一组伪输入框,即:并没有真正获取焦点,但只是显示了当前输入的值(当然啦,密码嘛,只有一个小黑点而已~)。

其次呢,我们需要简单不惧一下,让着一组(6个)伪造元素刚好重叠在真实输入框的下方。如下:

JS实现六位字符密码输入器功能 

边距实际是没有的啦~,途中只是为了看着更清晰一些。

另外,我们需要把顶层的真是输入框opcity设为0,这样其实呈现在用户面前的就是这一组伪造的输入框啦。

但是用户其实再输入的时候还是对真是输入框进行操作,在之后我们在讲用户的输入依次填写到伪造输入框里边就可以喽~

很简单吧~

二. 码代码

首先初始化各个DOM,以及绑定输入事件。

function init(fun){
var that = this;
this.callback = fun;
that.realInput = container.children[0];
that.bogusInput = container.children[1];
that.bogusInputArr = that.bogusInput.children;
that.maxLength = that.bogusInputArr[0].getAttribute("maxlength");
that.realInput.oninput = function(){
that.setValue();
}
that.realInput.onpropertychange = function(){
that.setValue();
}
}

然后在用户输入时分别将用户输入输入到伪造输入框中

function setValue(){
this.realInput.value = this.realInput.value.replace(/\D/g,"");
console.log(this.realInput.value.replace(/\D/g,""))
var real_str = this.realInput.value;
for(var i = 0 ; i < this.maxLength ; i++){
this.bogusInputArr[i].value = real_str[i]?real_str[i]:"";
}
if(real_str.length >= this.maxLength){
this.realInput.value = real_str.substring(0,6);
this.callback();
}
}

最后我们输入密码当然是要获取的啦~,来一个获取最终值的方法~

function getBoxInputValue(){
var realValue = "";
for(var i in this.bogusInputArr){
if(!this.bogusInputArr[i].value){
break;
}
realValue += this.bogusInputArr[i].value;
}
return realValue;
}

以上所述是小编给大家介绍的JS实现六位字符密码输入器功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
文本链接逐个出现的js脚本
Dec 12 Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
动态调用CSS文件的JS代码
Jul 29 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
js Dom实现换肤效果
Oct 21 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
微信小程序实现可长按移动控件
Nov 01 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
原生js实现无缝轮播图效果
Jan 28 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 #Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 #Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 #Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 #Javascript
jQuery Validate插件实现表单验证
Aug 19 #Javascript
jQuery如何封装输入框插件
Aug 19 #Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 #Javascript
You might like
一道关于php变量引用的面试题
2010/08/08 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
php生出随机字符串
2017/07/06 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
python中enumerate的用法实例解析
2014/08/18 Python
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
Python读写配置文件的方法
2015/06/03 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
python实现烟花小程序
2019/01/30 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
安全生产演讲稿
2014/05/09 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
公司庆典主持词
2015/07/04 职场文书
大学同学聚会感言
2015/07/30 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
TensorFlow的自动求导原理分析
2021/05/26 Python
MySQL sql模式设置引起的问题
2022/05/15 MySQL