jquery显示密码输入框

最新推荐文章于 2021-06-09 13:32:07 发布

ailong_1883

最新推荐文章于 2021-06-09 13:32:07 发布

阅读量494

点赞数

分类专栏： jquery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/ailong_1883/article/details/84252440

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

单个密码输入框:

html

 <body>
	<div>
		<input type="password" value="" name="password1" id="password1" class="password" /><br />
		<label><input type="checkbox" id="show_password" />显示密码</label>
	</div>
</body>

css样式

.password {
	width: 200px;
	height: 24px;
	font-size: 24px;
	line-height: 24px;
	bordeR: 1px solid #ccc;

}

jquery代码

$(function(){
	// 先取得 #password1 及產生一個文字輸入框
	var $password = $('#password1'), 
		$passwordInput = $('<input type="text" name="' + $password.attr('name') + '" class="' + $password.attr('className') + '" />');
 
	// 當勾選顯示密碼框時
	$('#show_password').click(function(){
		// 如果是勾選則...
		if(this.checked){
			// 用 $passwordInput 來取代 $password
			// 並把 $passwordInput 的值設為 $password 的值
			$password.replaceWith($passwordInput.val($password.val()));
		}else{
			// 用 $password 來取代 $passwordInput
			// 並把 $password 的值設為 $passwordInput 的值
			$passwordInput.replaceWith($password.val($passwordInput.val()));
		}
	});
});

以下js解决多个密码输入框显示的问题：

html

<body>
	<div>
		<input type="password" value="" name="password1" id="password1" class="password" />
		<br />
		<input type="password" value="" name="password2" id="password2" class="password" />
		<br />
		<input type="password" value="" name="password3" id="password3" class="password" />
	</div>
</body>

jquery

$(function(){
	// 把每一個有 .password 的密碼輸入框做處理
	$(':password.password').each(function(){
		// 先取得 #password1 及產生一個文字輸入框
		// 並產顯示密碼用的勾選框
		var $password = $(this), 
			$passwordInput = $('<input type="text" name="' + $password.attr('name') + '" class="' + $password.attr('className') + '" />'),
			$checkbox = $('<label><input type="checkbox" />顯示密碼</label>');
 
		// 把勾選框加在密碼輸入框的後面
		$password.after($checkbox);
 
		// 當勾選顯示密碼框時
		$checkbox.find(':checkbox').click(function(){
			// 如果是勾選則...
			if(this.checked){
				// 用 $passwordInput 來取代 $password
				// 並把 $passwordInput 的值設為 $password 的值
				$password.replaceWith($passwordInput.val($password.val()));
			}else{
				// 用 $password 來取代 $passwordInput
				// 並把 $password 的值設為 $passwordInput 的值
				$passwordInput.replaceWith($password.val($passwordInput.val()));
			}
		});
	});
});

ailong_1883

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery显示密码输入框

单个密码输入框:html &lt;body&gt; &lt;div&gt; &lt;input type="password" value="" name="password1" id="password1" class="password" /&gt;&lt;br /&gt; &lt;label&g
复制链接

扫一扫

专栏目录