Advanced Search

Return to Snippet

Revision: 30315
at August 11, 2010 19:49 by Rembrand
Updated Code 
//http://www.electrictoolbox.com/jquery-change-default-value-on-focus/

$(document).ready(function() {

$('.default-value').each(function() {
    var default_value = this.value;
    $(this).css('color', '#666'); // this could be in the style sheet instead
    $(this).focus(function() {
        if(this.value == default_value) {
            this.value = '';
            $(this).css('color', '#333');
        }
    });
    $(this).blur(function() {
        if(this.value == '') {
            $(this).css('color', '#666');
            this.value = default_value;
        }
    });
});

});

---

<input type="text" class="default-value" size="30" value="Enter keywords here" />
<input type="text" class="default-value" size="30" value="Another search box" />

Revision: 30314
at August 11, 2010 19:19 by Rembrand
Initial Code 
$(document).ready(function() {

$('.default-value').each(function() {
    var default_value = this.value;
    $(this).css('color', '#666'); // this could be in the style sheet instead
    $(this).focus(function() {
        if(this.value == default_value) {
            this.value = '';
            $(this).css('color', '#333');
        }
    });
    $(this).blur(function() {
        if(this.value == '') {
            $(this).css('color', '#666');
            this.value = default_value;
        }
    });
});

});

---

<input type="text" class="default-value" size="30" value="Enter keywords here" />
<input type="text" class="default-value" size="30" value="Another search box" />
Initial URL 
http://www.electrictoolbox.com/jquery-change-default-value-on-focus/
Initial Description 
Originally from http://www.electrictoolbox.com (see src)\r\nClear the default value of a form field when you click on it (when you want to type) and put it back if you leave without typing anything.
Initial Title 
Changing the default text value on focus with jQuery
Initial Tags 
forms
Initial Language 
jQuery