密码输入框显示明文密码

在做登录窗口的时候,通常会遇到需要显示密码这一功能,这一功能很简单。

为checkbox添加事件监听器如下:

vision_password.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View v) {
				if(vision_password.isChecked()){
					 new_password.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
				 }
				 else{
					 new_password.setTransformationMethod(PasswordTransformationMethod.getInstance());
				 }				
			}
		});


实现效果如下:

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个问题涉及到前端开发,可以使用HTML、CSS和JavaScript实现。以下是一种实现方式: 首先,在HTML中添加一个密码输入框和一个眼睛图标: ```html <input type="password" id="password-input"> <i class="fa fa-eye" id="password-toggle"></i> ``` 其中,`id="password-input"`是密码输入框的ID,`id="password-toggle"`是眼睛图标的ID。眼睛图标使用了Font Awesome图标库中的图标。 然后,在CSS中添加样式: ```css #password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; } #password-toggle:hover { opacity: 0.7; } ``` 这段CSS将眼睛图标定位到密码输入框的右侧,并且设置了鼠标悬停时的透明度。 最后,在JavaScript中添加事件处理程序: ```javascript const passwordInput = document.getElementById("password-input"); const passwordToggle = document.getElementById("password-toggle"); passwordToggle.addEventListener("mousedown", function() { passwordInput.type = "text"; }); passwordToggle.addEventListener("mouseup", function() { passwordInput.type = "password"; }); ``` 这段JavaScript将获取密码输入框和眼睛图标的元素,并且为眼睛图标添加了`mousedown`和`mouseup`事件处理程序。当鼠标左键按下时,将密码输入框的`type`属性设置为`text`,从而将密码显示明文;当鼠标松开时,将密码输入框的`type`属性设置为`password`,从而将密码显示密文。 这样,就可以在密码输入框中添加显示明文眼睛,并且实现鼠标左键点击眼睛密码显示明文,松开鼠标显示密文的功能了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值