Clear Input onFocus with Google Custom Search

Question

I'm moving a sites search over to google custom search.

The old input for text looks like this:

<input type="text" value="Search this website..." name="s" id="searchbox" onfocus="if (this.value == 'Search this website...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website...';}" />

Now I need to Have the attr 'name' as 'q', like so:

<input type="text" value="Search this website..." name="q" id="searchbox" onfocus="if (this.value == 'Search this website...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website...';}" />

The odd thing is that when I swap the name over to q, I'm unable to clear the search box on focus. Am I missing something super easy?

Answer 1

I don't know why that would happen, but I recommend you don't use JavaScript to do that and let HTML do it's job with the placeholder attribute:

<input type="text" placeholder="Search this website..." name="q" id="searchbox" />

Answer 2

Are you also including the CSE JS? Chances are it's overwriting your focus and blur handlers. The default implementation (see top of page) adds a Google-branded watermark.

You can implement CSE without their JS, and in that case your code works fine:

<form action="http://www.google.com/cse" id="cse-search-box">
    <input name="cx" type="hidden" value="yoursearchid" />
    <input name="ie" type="hidden" value="UTF-8" />
    <input name="q" type="text" value="Search this website..." onfocus="if (this.value == 'Search this website...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website...';}" />
    <input name="sa" type="submit" value="Search" />
</form>