Adding a Default Text in a Password Field Using JQuery

Sample Output

Here is an example of placing a default text on the password field using JQuery. Note that you are required to attach the jquery script to make sure that this guide will work.




Code:

For HTML

<input class="defaultPasswordPassword" type='password' name="password" id="password" />
<input class="defaultPasswordText" title="Password" type="text" value="Password" name="fakePassword" id="fakePassword" />

For JQuery script

<script>
$(document).ready(function(){
 // Adding Default word for password
 $(".defaultPasswordText").focus(function() {
  $(".defaultPasswordText").hide();
  $(".defaultPasswordPassword").show();
  $(".defaultPasswordPassword").focus();
 });
 $(".defaultPasswordPassword").blur(function() {
  if($(".defaultPasswordPassword").val() == "") {
   $(".defaultPasswordText").show();
   $(".defaultPasswordPassword").hide();
  }
 });

 $(".defaultPasswordPassword").hide();
 $(".defaultPasswordText").show();
}
</script>

How it works

The script works similarly as the algorithm for the text field. The only difference is we are rendering a fake text field when the value of the input is equal to blank. Else, we would display the password text field and hide the fake input field.