JavaScript 点击按钮input框不失去焦点

想实现点击按钮切换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 成功实现效果~

阅读更多
版权声明:本文为博主原创文章,博客地址:https://blog.csdn.net/qq_21744873,转载请注明出处。 https://blog.csdn.net/qq_21744873/article/details/80695481
文章标签: html js 输入框 焦点
想对作者说点什么? 我来说一句

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

关闭
关闭
关闭