html选择按键点击后锁死输入框_js实现的键盘开启大写锁定提示和密码显示与隐藏的效果...

不知道大家注意到没有，很多人性话的网站再输入密码的时候，如果开启大写锁定下过(切换键A左边的Cap Lock按键)，那么就会给出一个提示，因为很多时候密码验证是区分大小写的，如果不小心开启或者关闭大小写就有可能导致输入密码错误，还有在用户输入密码时，可以通过密码的显示与隐藏来查看输入的是否就是自己想输入的密码，减少密码输入的错误，都是一些人性化，提高用户体验性的举措，

下面就介绍一下如何利用javascript实现此功能。

onkeypress

这个事件在用户按下并放开任何字母数字键时发生。系统按钮(例如，箭头键和功能键)无法得到识别。

onkeyup

这个事件在用开任何先前按下的键盘键时发生。

onkeydown

这个事件在用户按下任何键盘键(包括系统按钮，如箭头键和功能键)时发生。 本文主要应用了前两个事件

代码如下:

对密码输入框的优化

#capital{

color:#F90;

padding:2px;

position:absolute;

}

/* 检测输入框的大小写是否开启 */

window.οnlοad=function(){

function isIE(){

if(!!window.ActiveXObject || "ActiveXObject" in window){

return true;

}

else{

return false;

}

}

(function(){

var inputPWD=document.getElementById('loginPasswd');

var capital=false;

var capitalTip={

elem:document.getElementById('capital'),

toggle:function(s){

var sy=this.elem.style;

var d=sy.display;

if(s){

sy.display = s;

}

else{

sy.display=d=='none'?'':'none';

}

}

}

var detectCapsLock=function(event){

if(capital){return};

var e = event||window.event;

var keyCode = e.keyCode||e.which;

var isShift = e.shiftKey ||(keyCode == 16 ) || false ;

if(((keyCode>=65&&keyCode<=90 )&&!isShift)||((keyCode>=97&&keyCode<=122 )&&isShift)){

capitalTip.toggle('block');

capital=true

}

else{

capitalTip.toggle('none');

}

}

if(!isIE()){

inputPWD.οnkeypress=detectCapsLock;

inputPWD.οnkeyup=function(event){

var e = event||window.event;

if(e.keyCode == 20 && capital){

capitalTip.toggle();

return false;

}

}

}

})()

}

请输入密码：显示密码

大写锁定已开启

/* 通过多选框 实现密码显示与隐藏设置 */

function $(id)

{

return document.getElementById(id);

}

$('xian').οnclick=function(){

var xuan=$('xian').checked;

var loginPasswd=$("loginPasswd");

if(xuan==true){

loginPasswd.type="text";

}else{

loginPasswd.type="password";

}

}