Geek Answers Handbook

Set the default value for entering a password so that it can be read

I want to have a password field that says “Password” before the user enters their password (so they know what the field is)

I would rather just use Javascript, the jQuery import for this seems wasteful in itself, but I have no idea how to do this. Images are explained quite clearly:

What it looks like:

enter image description here

I want it to look like this:

enter image description here

This is only a very simple website and the easiest login (no verification, etc.)

Any ideas?

<input id="username" name="username" class="input_text" type="text" value="Username" /> <input id="password" name="password" class="input_text" type="password" value="Password" />
+7
source share
5 answers

Change the password input as a simple text input type. Then, using JavaScript (or jQuery) in the focus event, change it as the password input type.

Here is a small untested sample with simple JavaScript (without JQUERY):

 <html> <head> <script type="text/javascript"> function makeItPassword() { document.getElementById("passcontainer") .innerHTML = "<input id=\"password\" name=\"password\" type=\"password\"/>"; document.getElementById("password").focus(); } </script> </head> <body> <form> <span id="passcontainer"> <input onfocus="return makeItPassword()" name="password" type="text" value="Type Password" /> </span> </form> </body> </html>
+10
source

If you are using HTML5, you must use the placeholder attribute.

 <input id="username" name="username" class="input_text" type="text" placeholder="Username" /> <input id="password" name="password" class="input_text" type="password" placeholder="Password" />

If you use HTML4, you can create a fake password field .

 <script type="text/javascript"> function pwdFocus() { $('#fakepassword').hide(); $('#password').show(); $('#password').focus(); } function pwdBlur() { if ($('#password').attr('value') == '') { $('#password').hide(); $('#fakepassword').show(); } } </script> <input id="username" name="username" class="input_text" type="text" v="Username" /> <input id="fakepassword" name="fakepassword" type="text" value="Password" style="color:#ccc" onfocus="pwdFocus()" /> <input id="password" name="password" class="input_text" type="password" style="display:none" onblur="pwdBlur()" />
+14
source

A simple solution:

 <input id="username" name="username" class="input_text" type="text" placeholder="Username" /> <input id="password" name="password" class="input_text" type="password" placeholder="Password" />
+5
source

Add the following code to your javascript:

 function makePasswordHidden() { document.getElementById("password").setAttribute("type", "password"); }

Change password entry:

 <input id="password" name="password" class="input_text" type="text" value="Password" onfocus="makePasswordHidden();">

What this does is make the input element "password" and the value is updated so that it is hidden. If you want value = "Password" to be visible, if the field is left blank, add the following javascript function:

 function makePasswordShown() { document.getElementById("password").setAttrivute("type", "text"); }

And add the following data to your password:

 onblur="if (this.value=='') makePasswordShown(); if (this.value=='') this.value='Password';"
+1
source

I had another idea to handle this problem and you won't need Javascript:

 <input onclick="value=''; type='password';" name="password" type="text" value="Password" />

Or you can also do it like this:

 <input onclick="this.value=''; this.type='password';" name="password" type="text" value="Password" />

I do not know the difference between these possibilities. Another thing you could change is to write instead of onclick=....... onfocus=.....

I don’t know the difference either.

But I hope I can help you. PS: Sorry, because of my poor English, I am German.

-2
source

More articles:


All Articles