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";
}
}
總結
以上是生活随笔為你收集整理的html选择按键点击后锁死输入框_js实现的键盘开启大写锁定提示和密码显示与隐藏的效果...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python清空列表clear_如何在P
- 下一篇： arduinoesp8266定时器_ES