老规矩~ 上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实现六位字符密码输入器功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
本文向大家介绍原生js实现密码强度验证功能,包括了原生js实现密码强度验证功能的使用技巧和注意事项,需要的朋友参考一下 我们在填写表单的时候,特别是输入密码的时候,经常看到实时显示密码强度的效果,那么这种效果如何通过我们的原生js实现呢? 思路: 1.密码通常是由数字,大写字母,小写字母以及特殊字符组成 2.密码全部是纯数字或者纯大写字母,或者纯小写字母,我们认为是密码强度较低 3.密码由两种混合
本文向大家介绍基于JS实现密码框(password)中显示文字提示功能代码,包括了基于JS实现密码框(password)中显示文字提示功能代码的使用技巧和注意事项,需要的朋友参考一下 其实实际上实现中并不能让password中显示文字提示,但是我们在工作中有这样的需求,当没输入东西的时候,框内有提示输入密码,但是当输入东西的时候又显示的是*号,那么是如何实现的呢?其实原理很简单,就是放两个文本框,
本文向大家介绍Android 自定义密码输入框实现代码,包括了Android 自定义密码输入框实现代码的使用技巧和注意事项,需要的朋友参考一下 效果 自定义密码输入框,项目的一个界面需求,我把这个自定义的输入框提取出来作为这次内容的题目。 输入前: 输入后: 输入1个字符就红一个圈圈,很简单的效果。 思路 1.自定义EditText。 2.背景为一个外圆环加内实心圆。 3.edittext
本文向大家介绍js实现计算器功能,包括了js实现计算器功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现计算器功能的具体代码,供大家参考,具体内容如下 知识点 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。 代码如下 效果图 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现),包括了基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)的使用技巧和注意事项,需要的朋友参考一下 最近做微信端的页面遇到了一个之前没有遇到过的一个页面,刚开始放在那没有去写,可是等其他页面都写好的时候,还是得回过头来研究这个页面问题,刚开始我请教了公司的移动研发,从他那里得到启发,最终实现了这个效果,
本文向大家介绍js+canvas实现验证码功能,包括了js+canvas实现验证码功能的使用技巧和注意事项,需要的朋友参考一下 刚刚开始接触canvas,写个验证码小功能练练手,实现效果图如下: 主要代码如下: html css js 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。