JavaScript | 阻止默认事件 点击按钮后input框不失去焦点

版权声明:本文为博主原创文章,博客地址:https://blog.csdn.net/qq_21744873,转载请注明出处。 https://blog.csdn.net/qq_21744873/article/details/80695481

想实现一个登录界面常用的效果:点击按钮后切换input框的显示/隐藏密码

首先想到的是,在按钮的点击事件里调用focus()使input获得焦点,代码如下:

<body>
	<input id="psw" type="password">
	<button id="btn">显示/隐藏</button>
</body>
<script>
	var isExposed=false;
	var btn=document.getElementById('btn');
	var psw=document.getElementById('psw');
	btn.onclick=function(){
		psw.focus();
		if (isExposed) {
			//切换为隐藏
			psw.type='password';
			isExposed=false;
		}else{
			//切换为显示
			psw.type='text';
			isExposed=true;
		}
	}
</script>

 

可这样做的效果是input失去焦点后又马上获得,效果不理想。

 

于是使用第二种方法,在按钮的onmousedown事件中阻止默认事件,代码如下:

<body>
	<input id="psw" type="password">
	<button id="btn">显示/隐藏</button>
</body>
<script>
	var isExposed=false;
	var btn=document.getElementById('btn');
	var psw=document.getElementById('psw');
	btn.onclick=function(){
		if (isExposed) {
			//切换为隐藏
			psw.type='password';
			isExposed=false;
		}else{
			//切换为显示
			psw.type='text';
			isExposed=true;
		}
	}
	btn.onmousedown=function(e){
	        //现代浏览器阻止默认事件
	        if ( e && e.preventDefault ) 
	            e.preventDefault(); 
	        //IE阻止默认事件
	        else 
	            window.event.returnValue = false; 
	        return false; 
	}
</script>

ok 成功实现效果~ :D

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页