Question

I’m very new to Javascript (and jQuery). My JSFiddle really shows the issue in the best way possible. http://jsfiddle.net/mkLsr/3/

I’m trying to make it so a search box text input that is focused upon page load, so a user can type into it without clicking into it. However, I also want default text in it that will disappear when the user clicks into the text input and re-appears if they click out of the text field without writing anything.

The problem is that I have other text inputs on the page, and as it is running now, if a user clicks onto one and begins typing, the focus jumps to the originally focused text input. How can I stop this from happening?

I tried using if ($('input:focus').size() == 0) to make it so it would only set the focus if no other focus has been set. Does it not work because it doesn’t re-check after the page loads? How can I get it to re-check, or is there some other problem?

I think that a search box that you can automatically type into, that has a default text that is erased upon typing, is about as user friendly as you can get – but I’m really hoping to do it without expense to other input’s user-friendliness.

Any help would be appreciated!

* EDIT *

Kai really helped me out with his Javascript solution and use of the “placeholder” HTML attribute. (http://jsfiddle.net/wgwTC/4/).

I’m just curious if someone knows how to apply it cross-browser so that the first text input is in focus still, but the placeholder text is there upon loading the page. Currently it works in Chrome, but not IE (I’m using 9) or Firefox (5.0). If there’s a cross-browser solution, it may help others who want the same or similar functionality on future projects.

Answer 1

Here’s a solution that uses the placeholder attribute but will fallback to JS for IE <= 9: (See http://jsfiddle.net/wgwTC/2/ for working example):

// Focus on this box by default
$('#header-search-box').focus();

// Support placeholder text for IE <= 9 (which doesn't support placeholder attribute)
if ( $.browser.msie && (parseInt($.browser.version, 10) <= 9) ) {
    $('input[name=search]').attr('value', 'Search New Equipment...');

    // Set placeholder text on blur
    $('input[name=search]').on('blur', function (e) {
        if (!e.currentTarget.value.length) {
            e.currentTarget.value = 'Search New Equipment...';
        }
    });    

    // Clear placeholder text on focus
    $('input[name=search]').on('focus', function (e) {
        if (e.currentTarget.value === 'Search New Equipment...') {
            e.currentTarget.value = '';
        }
    });
}