All geek questions in one place

The default value for the password field

How can I use the HTML input password and set the default value for the text to be readable, since entering the password will cause the characters to turn into dots or stars? Can I do this using Javascript?

+4
source share
7 answers

So, if I understand correctly, you want him to read the "password" or something in ordinary letters until someone clicks on it, and at that moment it becomes empty, and everything that is typed there becomes * ? Good thing you want:

in the head:

<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>

in body:

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

In the head:

  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'); } }

In body:

 <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" />
+2
source

It is much easier to use HTML ONLY:

Add this code:

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

in the input field and make sure that the type parameter is initially set to text

Example:

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

Try this javascript, it will definitely help you ...

 <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
source

You can simply use the placeholder attribute:

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

Thus, as soon as the user starts typing, the offer will automatically disappear.

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

if you do, the text of the field is read in the same way as the username .. why such a question?

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

Source: https://habr.com/ru/post/1336843/

More articles:


All Articles