如何在密碼字段中刪除並顯示單詞「password」

我正在使用下面的密碼字段代碼。我怎樣才能增強它，所以顯示單詞密碼，然後一旦該字段被點擊和無論是輸入應該在密碼的格式，其中的條目被屏蔽的點完成..如何在密碼字段中刪除並顯示單詞「password」

我正在使用PHP。

代碼：

<input type="password" name="password" maxlength="50" id="pass" 
onclick="this.value='';" onfocus="this.select()"   
onblur="this.value=!this.value?'Password':this.value;" value="Password">

來源

2011-03-01 AAA

嘗試使用jQuery

$(document).ready(function(){ 
    $('#id_password_field').val('password');   
    $('#id_password_field').click(function(){ 
     if($(this).val()=='password'){$(this).val('')} 
    }); 
    $('#id_password_field').focus(function(){ 
     if($(this).val()=='password'){$(this).val('')} 
    }); 
});

來源

2011-03-01 20:49:44 eos87

我該如何實施？謝謝！ – AAA 2011-03-01 20:59:55

你可以用這個加載jquery庫' '在你的標籤內，並在

這是不可能的，由於安全限制。

可以使用下面的代碼片段

<input type="password" id="inPwd" name="inPwd" propose="Password dummy" /> 
$("#inPwd").attr("type", "text");

來源

2011-03-01 20:44:28 BenR

也MAL想看看HTML 5的建議屬性。 http://diveintohtml5.org/forms.html – BenR 2011-03-01 20:45:46

這是不正確的嘗試（但它不會工作），也可以使用JavaScript。這裏是一個關於如何去做的教程。這個tut使用jQuery，但通過編寫自己的JS腳本可以實現相同的結果。

jQuery toggle of password input

歡呼

來源

2011-03-01 20:46:41

這是正確的，通過您自己的自定義JS或使用jquery，DOM腳本很可能是這樣。我已經發布了一個關於如何在自己的答案中使用自己的JS做的示例。 – Infotekka 2011-03-01 21:05:52

@infotekka - 同意，使用DOM而不是像jQuery這樣的打包庫是要走的路。更少的開銷和完全控制。很好的答案和補充代碼。 Thnx（moditekka的+1） – 2011-03-01 21:09:41

對於支持HTML5的瀏覽器，你可以簡單地使用佔位符屬性，一拉：

<input type="password" placeholder="Password Here">

這將將「密碼在這裏」顯示爲HTML5-en但是當用戶開始輸入時，它會顯示星號。上面的其他答案顯示了一些Javascript相關的答案，但很快我們甚至不需要那些:)

來源

2011-03-01 20:52:23 Jemaclus

這是絕對有可能通過各種JavaScript選項。爲了補充a.stgeorge發佈的關於使用jquery的內容，你也可以編寫你自己的JS來完成它。

看到它在這裏的行動：http://www.moditekka.com/pwsample.html

HTML樣本：

<input type="text" name="inpPass" id="inpPass" value="Password"/>

JavaScript片段（失敗在IE中，見下文）：

var inpPass = document.getElementById("inpPass"); 
inpPass.onfocus = function() { 
    if(this.getAttribute("type") == "text") { 
     this.setAttribute("type", "password"); 
     this.value = ""; 
    } 
} 
inpPass.onblur = function() { 
    if(this.value == "") { 
     this.value = "Password"; 
     this.setAttribute("type", "text"); 
    } 
}

編輯：如果任何人仍然閱讀這個我只是意識到，我的整潔的代碼將無法在IE中工作，這要歸功於Seattl的一個聰明的決定e僅在元素添加到DOM後才能使「type」屬性讀取。爲了適應這種情況，我更新了以下JavaScript代碼：

var inpPass = document.getElementById("inpPass"); 
inpPass.onfocus = function() { 
    if(this.getAttribute("type") == "text") { 
     var newInp = document.createElement('input'); 
     newInp.onfocus = this.onfocus; 
     newInp.onblur = this.onblur; 
     newInp.ID = 'inpPass'; 
     newInp.name = 'inpPass'; 
     newInp.setAttribute('type', 'password'); 
     this.parentNode.appendChild(newInp); 
     this.parentNode.removeChild(this); 
     newInp.focus(); 
    } 
} 
inpPass.onblur = function() { 
    if(this.value == "") { 
     var newInp = document.createElement('input'); 
     newInp.onfocus = this.onfocus; 
     newInp.onblur = this.onblur; 
     newInp.ID = 'inpPass'; 
     newInp.name = 'inpPass'; 
     newInp.setAttribute('type', 'text'); 
     newInp.value = "Password"; 
     this.parentNode.appendChild(newInp); 
     this.parentNode.removeChild(this); 
    } 
}

來源

2011-03-01 21:07:49 Infotekka

您也可以像tumblr那樣做。基本上他們有一個包裝輸入框的div。該div包含表單標籤和輸入。爲簡單起見，請忽略圖像更改。但我認爲你將不得不處理透明的圖像/不透明度，以使其實現它的工作方式。由於標籤位於表單輸入框後面。

如果您在框中單擊時觀看螢火蟲，它會在div上添加第二課。（這一點與圖像有關。）但是，當你開始輸入一個第三類獲取包括設置標籤顯示：無;

所以要以更簡單的方式回顧一下：

股利包裝標籤和輸入框。 div是相對定位的。標籤絕對位於輸入框後面。

使用onclick他們添加一個半透明狀態/交換背景圖像。當你開始輸入時，它將標籤設置爲不顯示;

來源

2011-03-02 01:30:42 mardala

純JS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head profile="http://gmpg.org/xfn/11"> 
    <script type="text/javascript"> 
    function ChangeToPassField() { 
    document.getElementById('PasswordField').type="password"; 
    } 
    </script> 
    </head> 
    <body> 
    <input type="text" value="password" id="PasswordField" onfocus="ChangeToPassField()" /> 
    </body> 
    </html>

來源

2011-09-20 10:51:03

嘿阿杰謝謝！這實際上將「密碼」一詞轉換爲點。我只想要點顯示只有當輸入新鮮的東西... – AAA 2011-09-22 12:40:12

相關問題

如何在密碼字段中刪除並顯示單詞「password」

回答

相關問題