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

一名写前端的GISer

于 2019-08-20 09:33:59 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Html&Css

原文链接：https://blog.youkuaiyun.com/qq_41427602/article/details/84324545

Html&Css 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现密码输入框显示与隐藏切换的方法。通过点击眼睛图标，用户可以在密码显示和隐藏之间进行切换，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码:

<input type="password" class="secret">
<span class="eyes">
    <img class="secreteyes" src="/static/images/eyes.png" alt=""> //闭眼
    <img class="secreteyesk none" src="/static/images/eyesk.png" alt=""> //睁眼
</span>

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');
		}
	})