I'm trying to set a default value for a search field. The idea is that the Search-Field has the value "Search" until the user clicks into it, then it should be empty. Also as long as it is "blank" (with "Search" as the value) it should have the class ".blank".

I tried this

<input autoplete="off" class="" id="searchq" name="searchq" onblur="if (this.value == '') { this.value='Search'; jQuery(this).addClass('blank'); };" onfocus="if (this.value == 'Search') { this.value=''; jQuery(this).removeClass('blank'); };" type="text" value="" />

it works so far, but when I load the site, the field is just empty. I have to click inside the field first and then somewhere on the page to make the effect working.

I guess it has something to do with onBlur. Any ideas?

Thanks!

I'm trying to set a default value for a search field. The idea is that the Search-Field has the value "Search" until the user clicks into it, then it should be empty. Also as long as it is "blank" (with "Search" as the value) it should have the class ".blank".

I tried this

<input autoplete="off" class="" id="searchq" name="searchq" onblur="if (this.value == '') { this.value='Search'; jQuery(this).addClass('blank'); };" onfocus="if (this.value == 'Search') { this.value=''; jQuery(this).removeClass('blank'); };" type="text" value="" />

it works so far, but when I load the site, the field is just empty. I have to click inside the field first and then somewhere on the page to make the effect working.

I guess it has something to do with onBlur. Any ideas?

Thanks!

• javascript
• jquery
• textfield

Share Improve this question Follow asked Jun 23, 2009 at 18:24 Ole SpaarmannOle Spaarmann 16.8k2828 gold badges106106 silver badges167167 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

This is known as a watermark. see http://digitalbush./projects/watermark-input-plugin/ for an example

Another idea is to put placeholders in your input types: (Note this is HTML5.)

<input type=text placeholder="Default text here"/>

this way the textfield will show in a grey text color: Default text here. Once clicked it will remove the text and replace it with your current text and when its empty it es back.

Just give it the default value 'Search' hardcoded, as in

<input ... type="text" value="Search" />

Sounds like you just need to set the initial value to Search, directly in the input tag, like so:

<input autoplete="off" class="blank" id="searchq" name="searchq" onblur="if (this.value == '') { this.value='Search'; jQuery(this).addClass('blank'); };" onfocus="if (this.value == 'Search') { this.value=''; jQuery(this).removeClass('blank'); };" type="text" value="Search" />

Note that we also set the initial class to blank as well.

I found the problem, my mistake: onBlur is called, when the user clicks somewhere else. onLoad is only allowed for the tags BODY and FRAMESET. The solution is to set the default value somewhere serverside (for me in the application_controller, if no search term is submitted).

Thanks anyway!

blur is when a field looses focus, it cant loose focus until it has focus to begin with, hence you need to click in the field, then click out to see it working. have you tried setting the class to .blank by default ?

<input autoplete="off" class="blank" ....

Here's a snippet I use to do this. There may be simpler ways, but this works. Any item with class .cleardefault will have it's value cleared on first mouseover. Any item with class .setcleardefault will clear the default and, if the user has not put anything in the box, reset it to the default value on mouse out.

function ClearDefault(item) {
    // clear the default value of a form element
    if (item.defaultValue == undefined)
        item.defaultValue = item.value;
    if (item.defaultValue == item.value)
        item.value = '';
} // ClearDefault

function SetDefault(item) {
    // if item is empty, restore the default value
    if (item.value == '')
        item.value = item.defaultValue;
} // SetDefault

$(document).ready(function() {
    $(".cleardefault")
        .mouseover(function(){
            ClearDefault(this);
        })
    $(".setcleardefault")
        .mouseover(function(){
            ClearDefault(this);
        })
        .mouseout(function(){
            SetDefault(this);
        });
    /*
    */
});