Ilia Draznin Online

Placeholder is a very use­ful attribute of the <input> tag that is spec­i­fied in the HTML5 spec. It pro­vides 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 user­name”. The nice thing about “place­holder”, as oppose to, for exam­ple, sim­ply set­ting some value for the field, is that it auto­mat­i­cally dis­ap­pears when the user starts typ­ing some­thing in, but it reap­pears if the user ends up leav­ing the field empty. Unfortunately this attribute, and its func­tion­al­ity, is actu­ally not sup­ported by most browsers, includ­ing Firefox 3.6 and IE8, it is how­ever sup­ported by Chrome 4, and pos­si­bly Safari 4 though I can’t vouch for the latter.

I recently had a few projects that needed this func­tion­al­ity, and while some of them had email, pass­word and other fields that required val­i­da­tion, one needed just very sim­ple text fields with place­holder text. So I wrote this very sim­ple javascript func­tion, 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 straight­for­ward. For one it checks that this is not a webkit browser, if it is I assume it sup­ports place­holder attribute and so doesn’t need the code. Then it checks if an ID for the input was pro­vided, 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 sim­ply apply to all inputs of type text, email or search (HTML5 input types).

When com­bined 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 place­holder 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 place­holder text). To fix that you can add a flag that keeps track of whether the user has edited the field or not.