input输入密码时隐藏和显示的切换

自己琢磨的一点思路 很简单常见的需求,先看效果:

眼睛是两张图片可以直接切下来使用;

先看html代码:



     //闭眼
     //睁眼

css:

.secret{
    border: none;
    border-bottom: 1px solid #ccc;
    text-indent: 10px;
}
.none{
    display:none;
}

由于clcik点击一次后切换不回来,所以定义一个变量 判断数字的奇偶,当a为奇数时密码显示,为偶时密码隐藏;

	var a = 0;
	$('.eyesk').click(function(){
		a += 1;
		if(a%2 == 0){
			$('.secreteyesk').addClass('none');
			$('.secreteyes').removeClass('none');
			$('.secret').prop('type','password');
		}else if(a%2 != 0){
			$('.secreteyes').addClass('none');
			$('.secreteyesk').removeClass('none');
			$('.secret').prop('type','text');
		}
	})	

 

你可能感兴趣的:(input输入密码时隐藏和显示的切换)