2011-01-24 17 views
4

パスワード入力によって文字が点または星に変わるので、HTMLパスワードの入力と読み取り可能なテキストのデフォルト値の両方を使用するにはどうすればよいですか? Javascriptでこれを行うことはできますか?パスワードフィールドのデフォルト値

+2

あなたのパスワードフィールドを読みやすいようにしたいのはなぜですか? – shamittomar

+0

あなたはパスワードフィールドが何であるか分からない人を知っていますか? 'label'を使って何が起こったのですか? – zzzzBov

+0

可能性があります。http://stackoverflow.com/questions/10660237/default-value-password-for-input-field-show-it –

答えて

4

私が正しく理解してあれば、誰かがそれが空白になります、その時点で、それをクリックすると、そこに入力されたものは*さんになりますまで、それは通常の文字で「パスワード」または何を読みたいです? [OK]を、あなたが欲しいのはこれです:

頭の中で:体内の

<script type="text/javascript"> 
    function changefield(){ 
     document.getElementById("passwordbox").innerHTML = "<input id=\"password-field\" type=\"password\" name=\"password-field\" title=\"Password\" />"; 
     document.getElementById("password-field").focus(); 
    } 
</script> 

<div id="passwordbox"> 
<input id="password-field" type="text" name="password-field" title="Password" onfocus="changefield();" value="password" /> 
</div> 
+0

の前に '.focus();'の前にタイポがあります。 –

+0

パーフェクト。他のユーザーのために、フォーカス()の前にa)がありません。 – sehummel

+0

私の答えに私の悪い、固定ブラケット – fiiv

-2
<input type="password" name="x" id="x" value="some value" onclick="alert(this.value);" /> 
-2

あなたがこれを行う場合は、フィールドのテキストだけで、ユーザー名のように読める..ですなぜ、このような質問?頭で

<input type="text" name="password" id="password" value="" /> 
2

体で
function Changetxt() { 
     if ($('#pwd').val() == "Enter Your Password Here") { 
      $('#pwd').val(''); 
      $('#pwd').css('color', 'black'); 
     } 
    } 

    function textboxtype() { 
     if ($('#pwd').val().length < 1) { 
      $('#pwd').val('Enter Your Password Here'); 
      $('#pwd').css('color', 'gray'); 
     } 
    } 

<input type="text" id="pwd" style="width: 180px; color: Gray;" onfocus="Changetxt();this.type='password'" 
          onblur="if(this.value==''){this.type='text';textboxtype();}" value="Enter Your Password Here" /> 
+1

+0

上記のコードを本文セクションで使用してください –

+1

このスレッドは古いですが、パスワードマネージャを使用している場合はこのコードが機能しないことを伝えたいと思います。どうして?パスワードマネージャはPASSWORD-FIELDを探します(また、 'type'を 'text'に設定します)。だからあなたは手動でログインしなければなりません。これは大きな時間を吸う!また、JSを介して 'タイプ'を変更することは古いブラウザではサポートされていないため、 drpelz

1

が、それは必ずあなたを助けるのJavaScriptこれを試してみてください...

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
<title>Watermark Textbox for Password Textbox Using JavaScript</title> 
<script language="javascript" type="text/javascript"> 
function WaterMark(objtxt, event) { 
var defaultText = "Enter Username Here"; 
var defaultpwdText = "Enter Password Here"; 
// Condition to check textbox length and event type 
if (objtxt.id == "txtUserName" || objtxt.id == "txtPwd") { 
if (objtxt.value.length == 0 & event.type == "blur") { 
//if condition true then setting text color and default text in textbox 
if (objtxt.id == "txtUserName") { 
objtxt.style.color = "Gray"; 
objtxt.value = defaultText; 
} 
if (objtxt.id == "txtPwd") { 
document.getElementById("<%= txtTempPwd.ClientID %>").style.display = "block"; 
objtxt.style.display = "none"; 
} 
} 
} 
// Condition to check textbox value and event type 
if ((objtxt.value == defaultText || objtxt.value == defaultpwdText) & event.type == "focus") { 
if (objtxt.id == "txtUserName") { 
objtxt.style.color = "black"; 
objtxt.value = ""; 
} 
if (objtxt.id == "txtTempPwd") { 
objtxt.style.display = "none"; 
document.getElementById("<%= txtPwd.ClientID %>").style.display = ""; 
document.getElementById("<%= txtPwd.ClientID %>").focus(); 
} 
} 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<table> 
<tr> 
<td><b>UserName:</b></td> 
<td> 
<asp:TextBox ID="txtUserName" runat="server" Text="Enter Username Here" Width="150px" ForeColor="Gray" onblur = "WaterMark(this, event);" onfocus = "WaterMark(this, event);" /> 
</td> 
</tr> 
<tr> 
<td><b>Password:</b></td> 
<td> 
<asp:TextBox ID="txtTempPwd" Text="Enter Password Here" runat="server" onfocus="WaterMark(this, event);" Width="150px" ForeColor="Gray" /> 
<asp:TextBox ID="txtPwd" TextMode="Password" Text="Enter Password Here" runat="server" Width="150px" Style="display:none" onblur="WaterMark(this, event);"/> 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html> 
1

あなたは、単に使用することができますplaceholder属性:

<input type="password" value="" placeholder="Insert your password..."/> 

このようにして、ユーザーが入力を開始するとすぐに、提案は自動的に離れます。

2

ONLY HTMLを使用してはるかに簡単オプション:

このコードを追加します。入力フィールド

onfocus="this.value='', this.type='password'"

typeが最初text

例に設定されていることを確認してください。

input onfocus="this.value='', this.type='password'" value="Password" type="text" title="Password" id="password_field" name="signin_password" 
+0

"only HTMLを使用" - これは実際にはJavaScriptです。しかしHTMLには_inline_が埋め込まれていますが、これは一般的に悪いとみなされます。懸念の分離 - 内容と行動の分離。 – MrWhite

関連する問題