Simple jQuery placeholder script for input fields

Update: I have created a better version of this script that, among other improvements, supports password fields, unlike the code below.

Placeholder is a very useful attribute of the <input> tag that is specified in the HTML5 spec. It provides a text that goes into the field, by default, and is used as a kind of a quick tip for the user about what they should type into the field, such as “type to search”, or “type in username”. The nice thing about “placeholder”, as oppose to, for example, simply setting some value for the field, is that it automatically disappears when the user starts typing something in, but it reappears if the user ends up leaving the field empty. Unfortunately this attribute, and its functionality, is actually not supported by most browsers, including Firefox 3.6 and IE8, it is however supported by Chrome 4, and possibly Safari 4 though I can’t vouch for the latter.

I recently had a few projects that needed this functionality, and while some of them had email, password and other fields that required validation, one needed just very simple text fields with placeholder text. So I wrote this very simple javascript function, using jQuery, to do just that (I’m using jQuery 1.4.2 here).

function setupPlaceholder(inputid) {
	if ($.browser.webkit) return false;

	var target = $('#'+inputid);
	if (target.length==0) {
		target = $('input[type="text"], input[type="email"], input[type="search"]');
	}

	target.each( function(i, el) {
		el = $(el);
		var ph = el.attr('placeholder');
		if (!ph) return true;

		el.addClass('placeholder');
		el.attr('value', ph);

		el.focus( function(e) {
			if( el.val()==ph ) {
				el.removeClass('placeholder');
				el.attr('value', '');
			}
		});

		el.blur( function(e) {
			if( $.trim(el.val())=='' ) {
				el.addClass('placeholder');
				el.attr('value', ph);
			}
		});
	});
}

The code is very straightforward. For one it checks that this is not a webkit browser, if it is I assume it supports placeholder attribute and so doesn’t need the code. Then it checks if an ID for the input was provided, just in case I wanted to do this on one field only. If there is no ID, or if it wasn’t found, it’ll simply apply to all inputs of type text, email or search (HTML5 input types).

When combined with some styles you end up with a nice input field with some “help” text, like this.



The one “catch” with this script is that I don’t check the case where a user would put the same text in as the placeholder text. If the user does this, then when they focus on the field again, the text will be erased (’cause the script thought it’s the placeholder text). To fix that you can add a flag that keeps track of whether the user has edited the field or not.

(4) Comments

  1. Brad
    April 11, 2010

    You can also check the current color of the text to see if it needs to be erased. If it’s gray, it won’t be erased even if it’s the same as the placeholder text.

  2. Ilia
    April 11, 2010

    Great idea Brad, that gives me an idea for an even simpler solution.

    The trouble with checking color is that now javascript depends on CSS, unless you go through the trouble of extracting the color value from the .placeholder class (granted, with jquery it’s not much trouble, but more than necessary).

    Instead of checking color we can simply check the class itself. If it’s placeholder then we go ahead and clear the field (on focus), otherwise don’t.

    In fact, if we have that then the value doesn’t need to be checked at all, it can be whatever, but if the user put it there then it’s not going to have “placeholder” class and so is not cleared on focus.

  3. gren
    April 22, 2010

    Thanks for the script, really useful.

    the test
    if ($.browser.webkit) return false;
    doesn’t work (and $.browser is deprecated).

    So, I propose another test :

    if(‘placeholder’ in document.createElement(‘input’)) return false;

    It works
    –on Firefox (placeholder not implemented by ff3.6 and test evaluated to false)
    –on Chrome and Safari (placeholder implemented and test evaluated to true)
    –on IE6+ (placeholder not implemented and test evaluated to false)

    see also http://diveintohtml5.org/detect.html#input-placeholder

    Regards,
    gren

  4. Marc Görtz
    November 8, 2010

    You may want to take a look at my Placeholder Placebo jQuery script at Github: https://gist.github.com/373672

    It tests for native placeholder support and extends jQuery’s $.support method. It also checks if the input element is focused while the page gets reloaded or an Ajax request is performed.

Trackbacks

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>