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 相关文章推荐
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 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默认安装产生系统漏洞
2006/10/09 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
PHP模块化安装教程
2016/06/01 PHP
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
python之mock模块基本使用方法详解
2019/06/27 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python3开发环境搭建详细教程
2020/06/18 Python
python 5个实用的技巧
2020/09/27 Python
python中time.ctime()实例用法
2021/02/03 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
给全校老师的建议书
2014/03/13 职场文书
食品业务员岗位职责
2014/03/18 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
毕业实习证明范本
2015/06/16 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL