Question

OK, So I am making a search box that has a value that goes away on click and comes back if you click away from the search box. Like the stackoverflow search but If you click off the search, the value comes back. I hope I’m being clear ( I know very little about javascript )… But For the users that don’t have javascript enabled, how do I just make it a blank input? Here’s my code

<INPUT type="text" name="q" value="Search using Business Name or Category..." onFocus="if(this.value == 'Search using Business Name or Category...') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Search using Business Name or Category...';}" />

I thought that maybe I should do a php if javascript enabled but I looked and couldnt find any php scripts? Any help would be greatly appreciated.

Answer 1

Use the placeholder attribute, please!

<INPUT type="text" name="q" placeholder="Search using Business Name or Category..." value="" />

Then use feature detection with JavaScript to make the placeholder work for browsers without support for the placeholder attribute.

For example, using Moderlizr with jQuery (untested):

// Add placeholder support for browsers which don't support it.
// TODO Special styling.
if (!Modernizr.input.placeholder) {
    $('input[placeholder][value=]')
        .each(function () {
            var $this = this;

            $this.val($this.attr('placeholder'));
        })
        .focus(function () {
            var $this = this;

            if ($this.val() === $this.attr('placeholder')) {
                $this.val('');
            }
        })
        .blur(function () {
            var $this = this;

            if ($this.val() === '') {
                $this.val($this.attr('placeholder'));
            }
        });
}