想实现一个登录界面常用的效果:点击按钮后切换input框的显示/隐藏密码
首先想到的是,在按钮的点击事件里调用focus()使input获得焦点,代码如下:
显示/隐藏
var isExposed=false;
var btn=document.getElementById('btn');
var psw=document.getElementById('psw');
btn.οnclick=function(){
psw.focus();
if (isExposed) {
//切换为隐藏
psw.type='password';
isExposed=false;
}else{
//切换为显示
psw.type='text';
isExposed=true;
}
}
可这样做的效果是input失去焦点后又马上获得,效果不理想。
于是使用第二种方法,在按钮的onmousedown事件中阻止默认事件,代码如下:
显示/隐藏
var isExposed=false;
var btn=document.getElementById('btn');
var psw=document.getElementById('psw');
btn.οnclick=function(){
if (isExposed) {
//切换为隐藏
psw.type='password';
isExposed=false;
}else{
//切换为显示
psw.type='text';
isExposed=true;
}
}
btn.οnmοusedοwn=function(e){
//现代浏览器阻止默认事件
if ( e && e.preventDefault )
e.preventDefault();
//IE阻止默认事件
else
window.event.returnValue = false;
return false;
}
ok 成功实现效果~ :D