如何在密碼字段中刪除和顯示單詞“ password”
[英]How to remove and show word “password” in password field
問題描述
我正在使用下面的密碼字段代碼。 我該如何增強它，所以顯示“密碼”一詞，然后單擊該字段並輸入任何內容時，都應以密碼格式完成，其中用點將其屏蔽。
我正在使用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">
7 個解決方案
解決方案1
3 已采納 2011-03-01 20:49:44
嘗試使用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('')}
});
});
解決方案2
3 2011-03-01 20:52:23
對於啟用HTML5的瀏覽器，您可以簡單地使用占位符屬性，例如：
<input type="password" placeholder="Password Here">
這將向啟用HTML5的用戶顯示“此處密碼”，但是當用戶開始輸入內容時，它將顯示星號。 上面的其他答案已經顯示了一些與Javascript相關的答案，但是不久我們甚至不需要這些了:)
解決方案3
2 2011-03-01 20:46:41
解決方案4
2 2011-03-01 21:07:49
通過各種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中運行，這要歸功於西雅圖的一個明智決定，即一旦將元素添加到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);
}
}
解決方案5
1 2011-03-01 20:44:28
由於安全限制，這是不可能的。
您可以使用以下代碼段嘗試（但無法使用）
<input type="password" id="inPwd" name="inPwd" propose="Password dummy" />
$("#inPwd").attr("type", "text");
解決方案6
1 2011-03-02 01:30:42
您也可以像tumblr一樣做。 基本上，它們有一個用於包裝輸入框的div。 該div同時包含表單標簽和輸入。 為簡單起見，請忽略圖像更改。 但是我認為您必須處理透明的圖像/不透明度才能使其正常工作。 由於標簽在表單輸入框的后面。
如果您在單擊框時觀看螢火蟲，則會在div周圍添加第二類。 （這與圖像有更多關系。）但是，當您開始輸入時，將包含第3類，將其設置為顯示：
因此，以更簡單的方式回顧一下：
Div包裝標簽和輸入框。 div是相對定位的。 標簽絕對位於輸入框的后面。
他們使用onclick來添加半透明狀態/交換背景圖像。 當您開始鍵入內容時，會將標簽設置為不顯示；
解決方案7
0 2011-09-20 10:51:03
用純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>
如何在Wordpress中刪除“重力表單用戶注冊”中的密碼確認字段？
[英]How can I remove the password confirmation field in Gravity Forms User Registration in Wordpress?
登錄表單 - 如何檢查用戶名或 POST 密碼字段是否為空並顯示錯誤文本？
[英]Login Form - How to check if the username or POST password field is empty and show an error text?
如何在 composer (laravel 4) 中刪除保存的用戶名和密碼
[英]How to remove save username and password in composer (laravel 4)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.