Default text field value that disappears on focus
The original jQuery script below has been improved and repackaged as a jQuery plugin. You can download it here: https://github.com/robschmitt/jquery.formdefaults
These scripts will allow you to provide a default value in a form input field, which will automatically disappear when a user clicks or focuses on the field, and reappear if no value has been entered. The script searches the page that it's inserted on for all form input fields that have a class of default-value applied. Each form input field must have a unique ID.
When the page loads the script changes the color of the text in the text fields it has found to the value of inactive_color. If the user clicks on the input field, the default text is blanked, and the colour changed to 'active_color'. If the user clicks away from the input field, i.e. the input field loses focus, the value of the text field will revert back to the original text, and the colour will change back to 'inactive_color', unless the user has entered some other text.
I've provided by a jQuery version, and a vanilla JavaScript version for those of you who aren't already including the jQuery library.
First, the jQuery version:
<script type="text/javascript"> /** * Written by Rob Schmitt, The Web Developer's Blog * http://webdeveloper.beforeseven.com/ */ /** * The following variables may be adjusted */ var active_color = '#000'; // Colour of user provided text var inactive_color = '#ccc'; // Colour of default text /** * No need to modify anything below this line */ $(document).ready(function() { $("input.default-value").css("color", inactive_color); var default_values = new Array(); $("input.default-value").focus(function() { if (!default_values[this.id]) { default_values[this.id] = this.value; } if (this.value == default_values[this.id]) { this.value = ''; this.style.color = active_color; } $(this).blur(function() { if (this.value == '') { this.style.color = inactive_color; this.value = default_values[this.id]; } }); }); }); </script>
And here's the ordinary JavaScript version:
<script type="text/javascript"> /** * Written by Rob Schmitt, The Web Developer's Blog * http://webdeveloper.beforeseven.com/ */ /** * The following variables may be adjusted */ var active_color = '#000'; // Colour of user provided text var inactive_color = '#ccc'; // Colour of default text /** * No need to modify anything below this line */ window.onload = formDefaultValues; function formDefaultValues() { var fields = getElementsByClassName(document, "input", "default-value"); if (!fields) { return; } var default_values = new Array(); for (var i = 0; i < fields.length; i++) { fields[i].style.color = inactive_color; if (!default_values[fields[i].id]) { default_values[fields[i].id] = fields[i].value; } fields[i].onfocus = function() { if (this.value == default_values[this.id]) { this.value = ''; this.style.color = active_color; } this.onblur = function() { if (this.value == '') { this.style.color = inactive_color; this.value = default_values[this.id]; } } } } } /** * getElementsByClassName() * Written by Jonathan Snook, http://www.snook.ca/jonathan * Add-ons by Robert Nyman, http://www.robertnyman.com */ function getElementsByClassName(oElm, strTagName, strClassName){ var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName); var arrReturnElements = new Array(); strClassName = strClassName.replace(/\-/g, "\\-"); var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)"); var oElement; for (var i = 0; i < arrElements.length; i++) { oElement = arrElements[i]; if (oRegExp.test(oElement.className)) { arrReturnElements.push(oElement); } } return (arrReturnElements); } </script>
NOTE: This article was first published on The Web Developer's Blog, which has now been discontinued.
—
Posted Wed, 30 Nov 2011 - 14:52