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

最新推荐文章于 2022-03-22 17:07:55 发布

lzrit

最新推荐文章于 2022-03-22 17:07:55 发布

阅读量1k

点赞数

分类专栏： js 文章标签： js

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

不知道大家注意到没有，很多人性话的网站再输入密码的时候，如果开启大写锁定下过（切换键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.ο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;
}
}
}
})()
}
</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').οnclick=function(){
var xuan=$('xian').checked;
var loginPasswd=$("loginPasswd");
if(xuan==true){
loginPasswd.type="text";
}else{
loginPasswd.type="password";
}
}
</script>
</body>
</html>

lzrit

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现的键盘开启大写锁定提示和密码显示与隐藏的效果

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

扫一扫