jQuery 实现输入框密码的显示及加密

Jiang_JY

已于 2023-12-14 08:52:37 修改

阅读量283

点赞数 5

分类专栏：前端 jQuery javascript 文章标签： jquery 前端 javascript

于 2023-12-08 09:01:06 首次发布

本文链接：https://blog.csdn.net/jiangjunyuan168/article/details/134869174

版权

前端同时被 3 个专栏收录

117 篇文章 7 订阅

订阅专栏

javascript

59 篇文章 1 订阅

订阅专栏

jQuery

4 篇文章 0 订阅

订阅专栏

实现原理

通过监听眼睛图标的点击事件来控制输入框的类型从而实现密码的展示与加密。

代码

代码部分主要展示 js 逻辑，html及css代码未完全展示。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有开发问题可联系作者</title>
</head>
<body>
    <div class="input-group user-passwork">
		<div class="p_controls"><img src="../images/p_show.png" id="eye"/></div>
        <input type="password" name="password" id="j_password" class="form-control" placeholder="密码" value=""/>
    </div>
    
    <script>
    $(function(){
		// 控制密码的显示与隐藏
		var $eye = $('#eye');
		var $psd = $('#j_password');
		var flag=0;
		$eye.on('click',function() {
        	controlsPassword();
        });
		
		function controlsPassword(){
    		if(flag==0)
    		{
				$psd[0].type = 'text';
    		    $eye.attr('src','../images/p_hidden.png')
    		    flag=1;
    		}
    		else
    		{
				$psd[0].type = 'password';
    		    $eye.attr('src','../images/p_show.png')
    		    flag=0;
    		}
		}
	})
    </script> 
</body>
</html>