This week I’ve provided a very simple script that I’ve used countless times. See the search form in the sidebar? The default text should be “Search for…”, but when you focus on the input, the text goes away (and sometimes the style changes), allowing you to search without having to delete any text first. This is very common, unobtrusive behavior that’s used so much because it’s convenient and intuitive. Now you can use it too! Here’s the code:

<br /> /**<br /> * Provides the common interaction of a basic style and text, then changing when a user<br /> * focuses on an input element<br /> * @param {Object} ops A key/value pair of options, including: id, text, classBlur, classFocus<br /> * @return {Boolean} True on success, false on failure<br /> * @author Matt Hackett (scriptnode.com)<br /> */<br /> dynamicInput = function(ops) {</p> <p> var el = document.getElementById(ops.id);</p> <p> if (!el) {<br /> return false;<br /> }</p> <p> if (el.value == ”) {<br /> el.value = ops.text;<br /> }</p> <p> el.onblur = function() {</p> <p> if (el.value == ”) {<br /> el.value = ops.text;<br /> }</p> <p> if (ops.classBlur) {<br /> el.className = ops.classBlur;<br /> }</p> <p> };</p> <p> el.onfocus = function() {</p> <p> if (el.value == ops.text) {<br /> el.value = ”;<br /> }</p> <p> if (ops.classFocus) {<br /> el.className = ops.classFocus;<br /> }</p> <p> };</p> <p> return true;</p> <p>};<br />

You may notice that this script attaches to the events directly, which will override any previously set events using the same method (not recommended). The reason I did it this way is to remove any dependency on a JavaScript library. You could alter the code very easily to use whatever library you fancy. For instance, if you’re a YUI fan, instead of el.onblur = function(){}, try YAHOO.util.Event.addListener(el, 'blur', function(){});.

There’s only one argument (an object) to pass into dynamicInput. The keys for this object are as follows:

• id – The id of the input element
• text – The default text to use (for example, “Search Now!”)
• classFocus – The CSS class to set on the input when the focus event is fired (optional)
• classBlur – The CSS class to set on the input when the blur event is fired (optional)

And here’s a quick example of how to use this script:

<br /> <input id=”example” value=”"/></p> <p><script type=”text/javascript”><br /> dynamicInput({<br /> id : ‘example’,<br /> text : ‘Click here to search’<br /> });<br />

It’s as easy as that! Enjoy!

• [Download dynamic-input.js] (789 bytes)
• [Download dynamic-input-min.js] (313 bytes; compressed)