密碼輸入字段在焦點/類型上從文本更改為密碼？

Question

我有一個注冊表單，其中輸入的標題位於文本框中，當您單擊該框時，文本消失，但是在密碼上我希望預覽文本保留為“密碼”而不是“•• ••••••”。 但是當用戶點擊文本框時應該清除文本，並且輸入的文本應該是“•••••••”。

這是按鈕的代碼：

<form method="post" action="register_process.php">
    <input type="text" class="button" value="USERNAME" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'USERNAME') {this.value = '';}" onblur="if (this.value == '') {this.value = 'USERNAME';}" name="username"  />
    <input type="text" class="button" value="EMAIL" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'EMAIL') {this.value = '';}" onblur="if (this.value == '') {this.value = 'EMAIL';}" name="email"  />
    <input type="text" class="button" value="PASSWORD" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'PASSWORD') {this.value = '';}" onblur="if (this.value == '') {this.value = 'PASSWORD';}" name="password"  />
    <input type="text" class="button" value="PASSWORD CONFIRM" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'PASSWORD CONFIRM') {this.value = '';}" onblur="if (this.value == '') {this.value = 'PASSWORD CONFIRM';}" name="password_confirm"  />    <br/>
    <input type="submit" class="button" value="JOIN!" name="join!"  />
</form>

其他一切正常，但我希望用戶密碼不顯示。 此外，我現在已將密碼字段保留為文本。

要看動作，請看這里： http ： //jsfiddle.net/e458S/

謝謝。

Answer 1

您可以使用javascript setAttribute

<form method="post" action="register_process.php">
   <input type="text" class="button" value="USERNAME" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'USERNAME') {this.value = '';}" onblur="if (this.value == '') {this.value = 'USERNAME';}" name="username"  />
   <input type="text" class="button" value="EMAIL" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'EMAIL') {this.value = '';}" onblur="if (this.value == '') {this.value = 'EMAIL';}" name="email"  />
   <input type="text" class="button" value="PASSWORD" onclick="this.value='';this.onclick='test';this.style.color='#000'; setAttribute('type', 'password');" onfocus="if (this.value == 'PASSWORD') {this.value = ''; setAttribute('type', 'password');}"   onblur="if (this.value == '') {this.value = 'PASSWORD';setAttribute('type', 'text');}" name="password"  />
   <input type="text" class="button" value="PASSWORD CONFIRM" onclick="this.value='';this.onclick='test';this.style.color='#000'; setAttribute('type', 'password');" onfocus="if (this.value == 'PASSWORD CONFIRM') {this.value = ''; setAttribute('type', 'password');}" onblur="if (this.value == '') {this.value = 'PASSWORD CONFIRM'; setAttribute('type', 'text');}" name="password_confirm"  />   <br/>
   <input type="submit" class="button" value="JOIN!" name="join!"  />
</form>

這里的例子

最后我發現了一個錯誤，當輸入密碼時，在它之前我將焦點更改為另一個字段，然后返回密碼，該字段清除。 它來自onclick="this.value=''"; 如果你想處理事件onclick只是刪除this.value=''因為它適用於onfocus，或者只是添加條件if(this.value=='password') ，否則如果使用與onfocus相同的onclick事件，最好刪除onclick事件處理程序，onfocus就足夠了。

Answer 2

請記住以下內容：

• 密碼字段應為input type='password' ，這允許瀏覽器應用不同的安全注意事項（例如不允許復制）。 此外，觸摸設備可以選擇性地提供顯示/隱藏密碼以用於可用性目的。

• 優選地，腳本不應該是內聯的。 相反，更喜歡不引人注目的JavaScript，它將自己附加到適當的元素上。

• 人們使用各種輸入機制。

我建議使用帶有功能檢測的HTML placeholder屬性，以便在不支持placeholder修改顯示。

簡單的例子： http ： //jsfiddle.net/fbw7j/3/

<input type="password" placeholder="enter a password">

// feature detection using the Modernizr library
if(!Modernizr.input.placeholder){
    // alter your markup
    $("input[type=password]").after("<span>Password</span>");
}

Answer 3

看看http://jsfiddle.net/e458S/39/

<input type="text" class="button" value="PASSWORD-OK" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'PASSWORD-OK') {this.value = ''; this.type='password';}" onblur="if (this.value == '') {this.value = 'PASSWORD-OK'; this.type='text';}" name="password"/>

但使用占位符也很好。

<input type="password" placeholder="enter a password">