html 切换密码可见性

Posted 2021-05-10

// toggle pass visibility
$(".row-password").on("click", ".row-icon", function(){
		$(this).closest(".row-password").toggleClass("show-pass");
	})
	.on("keyup", "input", function(){
		var 
		$this = $(this),
		typed = $this.val(),
		$sibling = $this.siblings("input");
		$sibling.val(typed);
	});

/* pass visibility toggle */

._clickable{
	cursor: pointer;
}

.form-row .row-icon{
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 36px;
	text-align: center;
}

.form-row .row-icon i{
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -20px;
	margin-top: -10px;
}

.form-row svg, .form-row img{
	vertical-align:top;
	display: block;
}

.form-row.row-password .pass-visible, .form-row.row-password.show-pass .pass-hidden, .form-row.row-password .icon-show-pass, .form-row.row-password.show-pass .icon-hide-pass{ display: none;}

.form-row.row-password.show-pass .pass-visible, .form-row.row-password.show-pass .icon-show-pass{ display: block;}

<div class="form-row row-password">
	<input class="pass-hidden" type="password" placeholder="Enter new password">
	<input class="pass-visible" type="text" placeholder="Enter new password">
	<div class="row-icon">
		<i class="icon-visibility _clickable">
			<img class="icon-show-pass" src="images/show-password.svg" alt="">
			<img class="icon-hide-pass" src="images/hide-password.svg" alt="">
		</i>							
	</div>
</div>