html按钮点击完就失去焦点,点击按钮后input输入框不失去焦点 JS阻止默认事件

想实现一个登录界面常用的效果：点击按钮后切换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