jQuery+CSS的翻转密码显示与隐藏【原创

来源:https://www.sucaihuo.com/js/2485.html 2017-07-20 23:51浏览(1112) 收藏

一款jQuery+CSS的翻转密码显示与隐藏特效,点击右侧的图标按钮,可以自由控制输入密码的显示和隐藏,普遍应用于注册或登录表单,喜欢的童鞋请收下吧。
jQuery+CSS的翻转密码显示与隐藏
分类:表单代码 > 输入框 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,先远程调用一个图标字体库,然后jQuery库,代码如下:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>

接着设置好页面元素的样式,代码如下:

页面的body部分,设置好页面元素的容器,实际上用了两个input作为密码输入框,分别对应两个不同的图标按钮,代码如下:

<div class="input-wrapper">
	<input id="input-pw" class="active-pw" type="password" placeholder="密码自动隐藏">
	<input id="input-text" class="passive-text" type="text"  placeholder="密码显示状态">
	<span class="input-trigger">
		<i class="material-icons icon-1">remove_red_eye</i>
		<i class="material-icons icon-2">more_horiz</i>
	</span>
</div>

页面的底部,设置好输入或点击的事件响应,注意一下,这里用了ES6的语法,代码如下:

$(() => {
	$('#input-text').on('keyup', () => {
		let tempVal = $('#input-text').val();
		$('#input-pw').val(tempVal);
	});
	$('#input-pw').on('keyup', () => {
		let tempVal = $('#input-pw').val();
		$('#input-text').val(tempVal);
	});	
	//翻转显示和隐藏密码
	$('.input-trigger').on('click', () => {
		$('#input-text').toggleClass('active-text passive-text');
		$('#input-pw').toggleClass('passive-pw active-pw');
		if ($('.icon-1').css('display') == 'inline-block' && $('.icon-2').css('display') == 'none'){
			$('.icon-1').toggle().css({'display':'none'});
			$('.icon-2').toggle().css({'display':'inline-block'});
		}else if ($('.icon-1').css('display') == 'none' && $('.icon-2').css('display') == 'inline-block'){
			$('.icon-1').toggle().css({'display':'inline-block'});
			$('.icon-2').toggle().css({'display':'none'});
		}
	});
});
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/2485.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2