javascript达成仿银行密码输入框效果的代码,PassWord输入框代码分享

效果:

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

废话不多说,直接给大家上干货了,写的不好欢迎提出意见。

www.bifa88.com 1 

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

具体代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 <title> 密码输入框 </title> 
 <meta name="generator" content="Microsoft FrontPage 6.0"/> 
 <meta name="author" content="lin.x"/> 
 <meta name="keywords" content=""/> 
 <meta name="description" content=""/> 
 <style type="text/css"> 
 <!-- 
 *{font-size:12px;font-family:verdana;color:#339933;} 
#contain{margin-left:64px;padding:3px;padding-bottom:7px;border:1px solid #339933;border-top:7px solid #339933;width:125px;height:145px;display:none;} 
[xmlns] #contain{padding-left:5px;width:113px;} 
 .nbox,.text{float:left;border:1px solid #339933;border-top:2px solid #339933;} 
 .nbox{margin:5px;} 
 .text{margin:5px 4px;} 
 a{padding:4px 8px;text-decoration:none;line-height:2;} 
 a:hover{background-color:#ACE89B;} 
 .text a{padding:5px 4px 4px 3px;} 
 --> 
 </style> 
 <script type="text/javascript"> 
function rand() { 
  return Math.floor(Math.random()*10); 
} 
var rangenum = new Array(); 
var tem; 
for (var i = 0; i<10; i++) { 
  rangenum.push(i); 
} 
for (var i = 0; i<10; i++) { 
  var a = rand(); 
  var b = rand(); 
  tem = rangenum[a]; 
  rangenum[a] = rangenum[b]; 
  rangenum[b] = tem; 
} 
function creatnums() { 
  for (i=0; i<rangenum.length; i++) { 
    document.writeln("<div class=\"nbox\" ><a href=\"#\"onclick=\"input("+rangenum[i]+")\">"+rangenum[i]+"</a></div>"); 
  } 
  document.writeln("<div class=\"text\"><a href=\"#\" onclick='input(-1)'>退格</a><a href=\"#\" onclick=\"clearinput()\">清除</a></div>"); 
} 
function input(i) { 
  var pwd=document.form.pwd.value; 
  if (pwd.length<8||i == '-1') { 
    if (i == '-1') { 
      document.form.pwd.value = pwd.substring(0,pwd.length-1); 
    } else { 
      document.form.pwd.value = pwd+i; 
    } 
    clearTimeout(timer); 
    timer=setTimeout("hiddenpad();document.getElementById('OK').focus()",4000) 

  } 
  else{clearTimeout(timer);alert("最多输入8位!");hiddenpad();} 
} 
function clearinput() { 
  document.form.pwd.value=""; 
} 
var timer 
function showpad(){ 
  document.getElementById('contain').style.display="block"; 
  clearTimeout(timer) 
  timer=setTimeout("hiddenpad()",3000) 
} 
function hiddenpad(){ 
  document.getElementById('contain').style.display="none"; 
} 
function noinput(){ 
var pwd=document.form.pwd.value; 
document.form.pwd.value = pwd.substring(0,pwd.length-2); 
} 
 </script> 
 </head> 
 <body> 
 <form name="form" action="//www.jb51.net"> 
  请输入密码 
 <input type="password" name="pwd" onclick="showpad()" onkeydown="return false;" size="8"> 
 <input type="button" value=" OK " onclick="hiddenpad()" id="OK"> 
</form> 
  <div id="contain"> 
 <script type="text/javascript"> 
 creatnums(); 
 </script> 
 </div> 
 </body> 
</html> 

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

function hiddenPass(event)
{ 
var password0 = document.getElementById("password0"); 
var password1 = document.getElementById("password1"); 
if (event.keyCode == 13)
{ 
} 
var keycode; 
if (window.event) 
{ // IE 
keycode = event.keyCode 
} else if (event.which) 
{ // Netscape/Firefox/Opera 
keycode = event.which 
} 
var keychar = String.fromCharCode(keycode); 
password1.value = password1.value + keychar; 
password1.value = password1.value.substring(0,
password0.length);}function clearPass()
{ 
$("#password0").val(""); 
$("#password1").val("");
}
<li class="ba">
<label>密 码:</label> 
<input type="text" id="password0" 
onfocus="javascript:clearPass();" 
onkeyup="this.value=this.value.replace(/./g,'*')" 
onkeypress="javascript:hiddenPass(event);"/> 
<input type="hidden" id="password1" name="password1"/>
</li>

以上所述是小编给大家介绍的javascript实现仿银行密码输入框效果的代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

一. 先说原理

以上代码内容是小编给大家分享的PassWord输入框代码,希望对大家有所帮助!

您可能感兴趣的文章:

  • js仿支付宝填写支付密码效果实现多方框输入密码
  • JavaScript实现输入框(密码框)出现提示语
  • JavaScript仿支付宝密码输入框
  • JavaScript如何实现在文本框(密码框)输入提示语
  • js检测用户输入密码强度
  • 输入密码检测大写是否锁定js实现代码
  • 用Javascript评估用户输入密码的强度(Knockout版)
  • JS实现六位字符密码输入器功能

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

您可能感兴趣的文章:

  • javascript实现仿银行密码输入框效果的代码
  • Android文本输入框(EditText)输入密码时显示与隐藏
  • JS+CSS实现实用的单击输入框弹出选择框的方法
  • JS实现在网页中弹出一个输入框的方法
  • js简单实现表单中点击按钮动态增加输入框数量的方法
  • JavaScript仿支付宝密码输入框
  • JavaScript实现输入框(密码框)出现提示语

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

www.bifa88.com 2 

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

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

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

www.bifa88.com,很简单吧~

二. 码代码

首先初始化各个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仿支付宝填写支付密码效果实现多方框输入密码
  • JavaScript实现输入框(密码框)出现提示语
  • JavaScript仿支付宝密码输入框
  • JavaScript如何实现在文本框(密码框)输入提示语
  • js检测用户输入密码强度
  • 输入密码检测大写是否锁定js实现代码
  • 用Javascript评估用户输入密码的强度(Knockout版)
  • javascript实现仿银行密码输入框效果的代码