One of the nice enhancement in HTML5 web form is being able to add placeholder text to input fields. Placeholder attribute allows you to display text in a form input when it is empty and when it is not focused (it clears the field on focus). This is a nifty feature, but it is not supported by all browsers yet. This tutorial will show you how to use Modernizr to detect if placeholder is supported, or else use jQuery to display the fallback placeholder text dynamically.

Demo HTML5 Placeholder

Download Demo Zip

Old School Javascript Way

Before we had the placeholder attribute, we relied on Javascript to fake the placeholder text. Below is an example. The text is inserted in the value attribute. On focus, it checks if the value is "search" and returns empty to clear the field. If the value is empty, it returns "search." As you can see, this way is not an efficient way because each field has to be checked.

<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}">

jQuery Placeholder Text (Demo)

Now with HTML5 placeholder, it is more semantic to use placeholder than value attribute. However, placeholder text is not supported by all browsers. To make it cross-browser, Modernizr and jQuery come in handy here.

Modernizr is used here to check if placeholder is supported. If placeholder is not supported, the jQuery code will run. It finds all elements with placeholder attribute and stores in a variable. It then compares the input value with the placeholder attribute. If the input value is empty, it will display the placeholder text and add a "placeholder" class to the input field. View Demo.

To use this on your site, download a copy of Modernizr and jQuery and paste the following code any where in your html page (be sure the jquery.js and modernizr.js file is in correct path).

<script src="jquery.js"></script>
<script src="modernizr.js"></script>

<script>
$(document).ready(function(){

if(!Modernizr.input.placeholder){

	$('[placeholder]').focus(function() {
	  var input = $(this);
	  if (input.val() == input.attr('placeholder')) {
		input.val('');
		input.removeClass('placeholder');
	  }
	}).blur(function() {
	  var input = $(this);
	  if (input.val() == '' || input.val() == input.attr('placeholder')) {
		input.addClass('placeholder');
		input.val(input.attr('placeholder'));
	  }
	}).blur();
	$('[placeholder]').parents('form').submit(function() {
	  $(this).find('[placeholder]').each(function() {
		var input = $(this);
		if (input.val() == input.attr('placeholder')) {
		  input.val('');
		}
	  })
	});

}

</script>

Remove Webkit Search Input Styles

Webkit browsers add extra styling to the search input field. To remove them, add the following CSS code:

input[type=search] {
-webkit-appearance: none;
} input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { display: none; }
webkit search input

Credit

The jQuery code is found at Nico Hagenburger.

109 Comments

1 3 4 5
  1. george
    Sep 20, 2012 @ 2:42 am

    nice

    Reply

  2. Kasio99
    Sep 20, 2012 @ 3:38 am

    Toooooo easyy!

    Reply

  3. Jared Christensen
    Nov 12, 2012 @ 4:38 pm

    What Modernizr test does this require if I’m doing a production build?

    Reply

  4. Mandeep Singh
    Nov 14, 2012 @ 11:32 pm

    I didn’t want to install Modernizr so, here is a fix I wrote: http://www.sciencestudioz.com/input-element-placeholder-attribute-in-ie
    Hope it helps!

    Reply

  5. Kattie
    Dec 3, 2012 @ 11:51 pm

    I’m amazed, I have to admit. Seldom do I come across a blog that’s equally educative and entertaining, and
    let me tell you, you have hit the nail on the head. The issue is something that not enough men and women
    are speaking intelligently about. Now i’m very happy I came across this in my hunt for something concerning this.

    Reply

  6. Nathan
    Mar 17, 2013 @ 9:39 pm

    This is so good. It’s good when things work.

    Reply

  7. Dymo L
    May 24, 2013 @ 3:24 pm

    Excellent post. I think that HTMl5 is one of the best lanaguage and we can change and do many things with it.
    Thanks

    Reply

  8. metys
    May 28, 2013 @ 3:15 am

    usefull,
    thx

    Reply

  9. Matt
    Oct 20, 2012 @ 3:00 pm

    Yes, any fix for password fields? I guess having two boxes that look like:
    Username *********
    Is kind of clear that the second one is a password box, but still…

    Reply

  10. Ajith
    Nov 22, 2012 @ 2:31 am

    For password fields, you need to use CSS

    background-position:left !important;
    background-image: url(/Content/images/UserName.png) !important;
    background-repeat: no-repeat !important;

    Reply

1 3 4 5

Leave a Reply