您的位置：首页 > Web前端 > JavaScript

js实现的键盘开启大写锁定提示和密码显示与隐藏的效果

2016-05-02 21:08 991 查看

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

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

onkeypress	这个事件在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。
onkeyup	这个事件在用开任何先前按下的键盘键时发生。
onkeydown	这个事件在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。

本文主要应用了前两个事件

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对密码输入框的优化</title>
<style type="text/css">
#capital{
color:#F90;
padding:2px;
position:absolute;
}
</style>
<script type="text/javascript">

/* 检测输入框的大小写是否开启 */
window.onload=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.onkeypress=detectCapsLock;
inputPWD.onkeyup=function(event){
var e = event||window.event;
if(e.keyCode == 20 && capital){
capitalTip.toggle();
return false;
}
}
}
})()
}
</script>
</head>
<body>
请输入密码：<input class="text" id="loginPasswd" type="password" /> <input type="checkbox" value="1" id="xian">显示密码
<div id="capital" style="display:none;">大写锁定已开启</div>

<script>
/* 通过多选框 实现密码显示与隐藏设置 */
function $(id)
{
return document.getElementById(id);
}
$('xian').onclick=function(){
var xuan=$('xian').checked;
var loginPasswd=$("loginPasswd");
if(xuan==true){
loginPasswd.type="text";
}else{
loginPasswd.type="password";
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航