Home » jQuery 應用

[jQ]切換顯示密碼輸入框

[ 日期： | 瀏覽：26,441 | 迴響：4 ]
範例 1
範例 2
請協助我把這個效果加到我的網站 (只要 300 元)
沒錯!只要 300 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

不知道各位是否有遇過輸入密碼時，可能輸入到一半卻忘了前面已經輸入了那些的經驗呢？通常忘記時就是要重新輸入了，但如果能看到已輸入的內容的話，那是不是就能針對那些錯的或是漏的來修改呢？

像是在手機上的某些應用程式可能有多提供顯示密碼的功能



或者是 Windows 的無線網路的密碼設定也有一樣的選項



所以筆者要教各位如何在網頁中也做出一樣的顯示密碼的效果。

首先準備個簡單的 HTML：

檢視原始碼 HTML
1
2
3
4
5
6

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

接著美化一下輸入框：

檢視原始碼 CSS
1
2
3
4
5
6
7

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

最後當然就是幫 #show_password 來指定點選時的動作判斷：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(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()));
		}
	});
});

也許有同學會問說：為什麼不直接變更 type 為 text 或是 password 就好呢？這是因為 input 元素產生後，就不允許去改變它的 type 了。所以筆者這邊才要大費周章的產生一個純的文字輸入框囉。若沒問題的話，當使用者點選"顯示密碼"時，就會自動切換的效果囉！



不過若網頁中有多個密碼輸入框時，例如有這樣的 HTML 時：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9

<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>

隨隨便便就有 3 個密碼輸入框了，要這樣一個一個自己手動加上勾選框有可能會是一件麻煩的事。因此，筆者再來改造一下程式：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

$(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()));
			}
		});
	});
});

嘿~這樣一來就算有再多的密碼輸入框也不怕囉！

範例 1 範例 2

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

4 筆針對 [jQ]切換顯示密碼輸入框 的迴響

  1. 請問有可能做成 on mouse hover 的效果嗎? 也就是滑鼠移到 "顯示密碼" 文字上方即顯示密碼, 移開滑鼠即遮蔽密碼。

  3. 想請問男丁老師，若希望像手機一樣，輸入密碼時顯示最後一碼的字，前面的字都為．該怎麼處理？謝謝

發表迴響