六位字符密码输入器

leiyi 发布于2019-08-01 15:36 / 2324人阅读

摘要：另外，我们需要把顶层的真是输入框设为，这样其实呈现在用户面前的就是这一组伪造的输入框啦。然后在用户输入时分别将用户输入输入到伪造输入框中最后我们输入密码当然是要获取的啦，来一个获取最终值的方法

老规矩~ 上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;
}

GPU云服务器云服务器字符输入器 js密码输入器 js随机生六位密码输入字符

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49998.html

六位字符密码输入器

摘要：另外，我们需要把顶层的真是输入框设为，这样其实呈现在用户面前的就是这一组伪造的输入框啦。然后在用户输入时分别将用户输入输入到伪造输入框中最后我们输入密码当然是要获取的啦，来一个获取最终值的方法老规矩~ 上DEMO，过过瘾先：六位字符密码输入器再上源码：六位字符密码输入器从DEMO中我看可以看出，首先只能输入六个字符，并且仅允许输入数字，在输入六位数字完成之后会自动执行一个回调（DE...

Codeing_ls 2019-08-29 11:08 评论0 收藏0
六位字符密码输入器

摘要：另外，我们需要把顶层的真是输入框设为，这样其实呈现在用户面前的就是这一组伪造的输入框啦。然后在用户输入时分别将用户输入输入到伪造输入框中最后我们输入密码当然是要获取的啦，来一个获取最终值的方法老规矩~ 上DEMO，过过瘾先：六位字符密码输入器再上源码：六位字符密码输入器从DEMO中我看可以看出，首先只能输入六个字符，并且仅允许输入数字，在输入六位数字完成之后会自动执行一个回调（DE...

zorro 2019-08-21 14:19 评论0 收藏0
吓人！仅花20小时18美元，可瞬间破译1100万个密码

摘要：图片来源可能大部分人都没有意识到设置密码不走心的严重性，直到热心市民刘先生现身说法。网络平台上有超过万个公开的密码集。对其再次进行虚拟破解有助于提高个人密码安全意识，防范真实密码破译攻击。万个密码中被破解。全文共2512字，预计学习时长4分钟 showImg(https://segmentfault.com/img/bVbvMv8); 事情是这样发生的。在某个阳光明媚的下午，热心市...

stormgens 2019-07-31 12:10 评论0 收藏0
GitChat · 安全 | 聊聊「密码找回」

摘要：微信任意用户密码修改漏洞漏洞描述在微信官方的首页上发现了找回密码功能。选择通过手机号码找回密码。提交成功，输入新密码。网易邮箱可直接修改其他用户密码描述这次我们看一个邮箱的找回密码漏洞，这个还真和上面的方式有点不一样。来自 GitChat 作者：汤青松更多使用技术，尽在微信公众号：GitChat技术杂谈进入 GitChat 阅读原文 WEB安全用户密码找回多案例安全攻防实战这次文...

YorkChen 2019-06-21 16:36 评论0 收藏0