Textbox placeholder text/default text

Filed under Scripts by Eric Griffiths on 5/30/2012

Demo

One of the trends that you see with log on forms is placeholder text in the text boxes that disappears when you start typing. This is commonly used in small areas where labeling the inputs conventionally can not be done. The HTML5 specification has an attribute called placeholder where we could do something like this:

<input type="password" name="password" placeholder="Enter Password" />

However, this is not well supported among browsers yet. Another option is to use a bunch of extra HTML, CSS and JavaScript or Jquery to create an extra text box and hide or show it. The problem is, you cannot change the input type of the text box back and forth from password to text. So any default text in the password box shows as bullets. The jquery and JavaScript to do this properly is complex for the simple effect that it is. For that, I recommend a different way to go about it.

Lets use background images in the text boxes, then use just a few lines of Jquery to finish the effect… very simple!

CSS:

#user {
 background-image: url('username.png');
 background-repeat: no-repeat;
 }
 #password {
 background-image: url('password.png');
 background-repeat: no-repeat;
 }

The Form:

<form id="login">
<fieldset><legend>Log in</legend>
<p><input type="text" name="user" id="user"  /></p>
<p><input type="password" name="password" id="password" /></p>
</fieldset>
<input type="submit" />
</form>

And the Jquery:

<script>
$(window).load(function() {
    $('.textbx').focus(function(){
        $(this).css({'background-image' : 'none'});
    });
    $('#user').blur(function(){
       var tval = $(this).val();
       if (!tval) {
          $(this).css({'background-image': 'url("username.png")'});
       }
    });        

    $('#password').blur(function(){
       var tval = $(this).val();
       if (!tval) {
          $(this).css({'background-image': 'url("password.png")'});
       }
   });
});
</script>

This method is very simple to use and implement. The only other thing you have to do is create the background images with the text on them. It is usually not a good idea to substitute text with images, but given the simple nature of this effect, this is a small negative. The only other reason that I can see not using this is if you absolutely need to use a background image in the text box for another purpose.

Demo: http://ohiowebpro.com/test/default_text.html

• email
• facebook
• linkedin
• twitter