Form Input Placeholder Text

by Curtiss   |   last updated July 10, 2010   |   Javascript Tutorials ·

One of the new features coming in HTML5 is placeholder text for form inputs. The concept of placeholder text has been around for quite a while, and is fantastic for usability. Basically, placeholder text is text that appears inside of a form input when the page loads, but disappears when the user places the cursor in that form input.

Because HTML5 is still only partially supported, it’s still necessary to use javascript (you could conceivably use CSS to achieve most of the functions of placeholder, but most of the browsers that don’t support the HTML5 placeholder attribute also don’t support the necessary CSS to achieve this anyway). Within this article, I’m going to show you a few different options to add support for placeholder in all browsers.

To begin with, let’s take a look at how the placeholder attribute works. It’s quite simple. All you need to do is create an input that looks something like:

<input type="text" name="myinput" id="myinput" placeholder="This is some placeholder text" />

If you have a browser that supports the placeholder attribute, you’ll see “This is some placeholder text” in the form input whenever it’s empty. Of course, the placeholder attribute (at the time of this writing) is only supported in Chrome and Safari (no support for this attribute is currently available in Firefox, Opera or Internet Explorer), so you’ll need to do something else to get it working properly.

jQuery Solution

The easiest method is to use a jQuery plugin like placeHeld. PlaceHeld is a very nice, very easy-to-use plugin. Placeheld automatically determines whether or not the user’s browser supports the placeholder attribute. If the browser does not support it, the plugin fakes it by adding a value to the input that gets removed whenever the input receives focus. It even adds a CSS class to the input when it adds the placeholder text, so you can style your placeholder text differently from the standard input text. By default, a CSS class of “placeheld” is applied, but you can change that through the placeHeld options.

To use placeHeld, you will need to make sure that jQuery is in use on your site/page (if you’re using WordPress, it already is). If you’re not already using jQuery for other uses on your site, I would not recommend including it just for the use of this plug-in. If you are already using, it, though, this plug-in can be invaluable.

Once you’ve made sure jQuery is in place, you include the placeHeld plugin and then use some code similar to the following:

<script type="text/javascript">
/* Enable the use of the $ sign, even if jQuery is in compatibility mode
    This method of invoking jQuery also makes sure the document is ready before
    doing anything. */
jQuery(function( $ ) {
    $( '#myinput').placeHeld();
});
</script>

That’s all there is to it. The placeHeld plugin will automatically detect the placeholder attribute within your input and use that text as the fake placeholder in browsers that do not support that attribute.

Pure Javascript Solution

If you are not currently using jQuery, you can use standard javascript to achieve something similar (though, it’s more difficult to get it not to execute in browsers that support the placeholder attribute, so this method will execute in all browsers, regardless of their support for placeholder). To do this, you would use some script similar to the following:

<form id="myForm" onsubmit="clearPlaceHolder('myinput'); clearPlaceHolder('myinput2'); return true;">
<input type="text" name="myinput" id="myinput" placeholder="This is some placeholder text" onfocus="clearPlaceHolder(this.id);" onblur="addPlaceHolder(this.id);" />
<br />
<input type="text" name="myinput2" id="myinput2" placeholder="This is more placeholder text" onfocus="clearPlaceHolder(this.id);" onblur="addPlaceHolder(this.id);" />
<br />
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
/* These functions created by Curtiss Grymala for the article at:
   http://www.htmlcenter.com/blog/form-input-placeholder-text/ */
function addPlaceHolder(elID) {
    if(document.getElementById(elID)) {
        var el = document.getElementById(elID);
		console.log(el);
		var pH = el.getAttribute('placeholder');
		console.log(el.getAttribute('placeholder'));
        if(pH !== 'undefined' && el.value == '') {
            el.value = pH;
            el.className += 'placeheld';
        }
    }
}
function clearPlaceHolder(elID) {
    if(document.getElementById(elID)) {
        var el = document.getElementById(elID);
		console.log(el);
		var pH = el.getAttribute('placeholder');
        if(pH !== 'undefined' && el.value == pH) {
            el.value = '';
            el.className = el.className.replace('placeheld','');
        }
    }
}
var myElIDs = ['myinput','myinput2'];
console.log(myElIDs);
for(var i in myElIDs) {
    if(document.getElementById(myElIDs[i])) {
		console.log(document.getElementById(myElIDs[i]));
		addPlaceHolder(myElIDs[i]);
    }
}
</script>