Default text field value that disappears on focus
See the search form top right? Click the search box. See how the default text disappears and then reappears when you click away from the search box? Here's how you do it.
The script below 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>
Delicious
Digg
StumbleUpon
Reddit
Facebook
TechnoratiComments
Help
I like this script very much but I'm having trouble getting it to work. How do I use it exactly? Do I place it in the section? or the section? Do I need to change anything in my form? please help me...
wait nvm I get it now. I'm
wait nvm I get it now. I'm supposed to enter "default-value" for the input class.
Multiple Input
This script currently doesn't support multiple input boxes with different names. If they have the same name it will work for them, if they don't it will just act like a normal default value.
This affects the first box clicked on so if I have four input boxes with the values One, Two, Three, Three; if I click on One after page load it will act as it should, but only for that field. If I click on three, it will work for both the input boxes with the value Three, but none of the others.
Is there a way to fix this?
Re: Multiple Input
Thanks for pointing out the bug that occurs when you try to use multiple input fields on the same page.
I forgot to mention that each form field requires a unique ID. That is all you need to change to get the script working properly. I have updated my instructions accordingly.
I found another little bug in the ordinary JavaScript version of the script and have fixed this too.
This is great! Nice blog.
This is great! Nice blog.
Text Area
Very nice script and wasn't easy to find.
Is it possible to make it work with a textarea?
Thanks
quite a bloated script for an easy function.
<input name="keyword_" type="text" size="25" style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">Thanks Michael
Thanks for your contribution, Michael. Your method works very well, though I'd still stick with my own method. I accept it's just preference my preference, but I like to avoid inline JavaScript when I have the choice.
simple
if u want just a simple input form value that just disapear when you focus your cursor just use this
<input onfocus="this.value=''" type="text" value="some text" />
or this
<input onfocus="this.select()" type="text" value="some text" />
