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

 更新时间:2016年08月19日 11:48:34   投稿:mrr  
这篇文章主要介绍了JS实现六位字符密码输入器功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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

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

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

一. 先说原理

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

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

 

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

另外,我们需要把顶层的真是输入框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实现六位字符密码输入器功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 光标的一些操作总结

    光标的一些操作总结

    IE下的Range操作比Mozilla下强很多,这里只讨论IE下的操作,这里选介绍几个光标定位的特点
    2006-10-10
  • JS实现的字符串数组去重功能小结

    JS实现的字符串数组去重功能小结

    这篇文章主要介绍了JS实现的字符串数组去重功能,结合实例形式分析了javascript基于ES6、ES5、ES3及正则实现数组去重的相关操作技巧,需要的朋友可以参考下
    2019-06-06
  • Javascript 实现广告后加载 可加载百度谷歌联盟广告

    Javascript 实现广告后加载 可加载百度谷歌联盟广告

    本文主要介绍一种新的广告后加载的方式,支持自定义HTML广告、百度联盟广告和谷歌联盟广告。这种方式在页面加载完成后执行,不影响内容的显示,对用户更加友好。
    2016-05-05
  • 深入了解Javascript的事件循环机制

    深入了解Javascript的事件循环机制

    单线程的同步等待极大影响效率,任务不得不一个一个等待执行,对于网页应用是无法接受的。所以Javascript使用事件循环机制来解决异步任务的问题。本文就来讲讲Javascript的事件循环机制,希望对你有所帮助
    2022-09-09
  • 深入了解JavaScript中的函数式编程

    深入了解JavaScript中的函数式编程

    JavaScript是一门多范式的编程语言,其中函数式编程成为了一种受欢迎的范式之一,本文将带您深入了解JavaScript函数式编程的核心概念和技术,需要的可以参考一下
    2023-06-06
  •  javascript数组中的lastIndexOf方法

     javascript数组中的lastIndexOf方法

    这篇文章主要介绍了 javascript数组中的lastIndexOf方法,该方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索,下文详细内容需要的小伙伴可以参考一下
    2022-03-03
  • bootstrap实现tab选项卡切换

    bootstrap实现tab选项卡切换

    这篇文章主要为大家详细介绍了bootstrap实现tab选项卡切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 1分钟快速了解js实现下载文件功能的4种方式

    1分钟快速了解js实现下载文件功能的4种方式

    在前端开发中,我们经常需要实现文件下载功能,例如下载用户上传的图片、用户生成的文件等,这篇文章主要给大家介绍了关于如何通过1分钟快速了解js实现下载文件功能的4种方式,需要的朋友可以参考下
    2024-03-03
  • checkbox勾选判断代码分析

    checkbox勾选判断代码分析

    我们在做项目的时候,特别是注册用户的时候,基本上都需要有注册协议之类的东西,那么我们如何判断用户是否勾选了同意了此协议呢?
    2014-06-06
  • 整理Javascript事件响应学习笔记

    整理Javascript事件响应学习笔记

    整理Javascript事件响应学习笔记,之前一系列的文章是跟我学习Javascript,本文就是进一步学习javascript流程控制语句,希望大家继续关注
    2015-12-12

最新评论