2011-01-24 5 views
4

Как я могу использовать ввод пароля HTML и устанавливать значение по умолчанию для текста, которое будет читаемым, так как ввод пароля превратит символы в точки или звезды? Могу ли я сделать это с помощью Javascript?Значение поля по умолчанию для поля

+2

Пожалуйста, скажите, почему вы хотите, чтобы ваше поле пароля было читаемым? – shamittomar

+0

знаете ли вы кого-то, кто не знает, что такое поле для пароля? Что случилось с использованием «метки»? – zzzzBov

+0

Возможный дубликат http://stackoverflow.com/questions/10660237/default-value-password-for-input-field-show-it –

ответ

4

Так что, если я правильно понимаю, вы хотите, чтобы прочитать «пароль» или что-то в обычных письмах, пока кто-то нажимает на него, после чего он станет пустым, и что-нибудь напечатал там будет * s ? Хорошо, что вы хотите это:

в голове:

<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

Typo before '.focus();' :) –

+0

Отлично. Просто для других пользователей есть а), отсутствующие перед фокусом(). – 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 MANAGERS. Зачем? Поскольку администраторы паролей ищут ПАРОЛЬ-ПОЛЯ (и вы устанавливаете «тип» на «текст»).Поэтому вам нужно войти в систему вручную, и это отстойное ВРЕМЯ! Также он не работает для 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

Намного проще вариант, используя только 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

«Использование ТОЛЬКО HTML» - это на самом деле JavaScript. Но встроенный _inline_ в HTML, который обычно считается плохим. Разделение проблем - разделение содержания и поведения. – MrWhite

Смежные вопросы