CODEWITHSUNDEEP
javascriptjquerytextfield
Ole Spaarmann
Ole Spaarmann

Reputation: 16749

Set default value for Search field - Please Help!

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 autocomplete="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!

Upvotes: 0

Views: 8856

Answers (7)

Vinnie
Vinnie

Reputation: 35

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 comes back.

Upvotes: 3

Peter Rowell
Peter Rowell

Reputation: 17713

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);
        });
    /*
    */
});

Upvotes: 0

Peter
Peter

Reputation: 6362

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

<input autocomplete="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.

Upvotes: 2

MSpreij
MSpreij

Reputation: 1152

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

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

Upvotes: 2

mcintyre321
mcintyre321

Reputation: 13306

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

Upvotes: 4

bumperbox
bumperbox

Reputation: 10214

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 autocomplete="off" class="blank" ....

Upvotes: 0

Ole Spaarmann
Ole Spaarmann

Reputation: 16749

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!

Upvotes: 1

Related Questions