Highlight search box text

[nihalz]

hi

what do i have to do to a search box form, so that whenever you click on the box, whatever text is there gets selected and the user can just hit backspace or delete to clear the whole box?

alternatively, is there any way to mimic the OS X style search bar, where you have a 'clear' button on the right of the bar? like this:


thanks for any help!

[jscheuer1]

<input type="text" onclick="this.select();" value="search">

[Twey]

The user just has to double-click it on all systems I've used...

[eleven82]

I agree with jscheur1, but here's a little more to that code that when they click in the box the text disappears. If they don't type anything the text reappears when they click off the box.

<input type="text" onfocus="if(this.value=='Text')this.value=''" onblur="if(this.value=='')this.value='Text'" value="Text" />

[Twey]

Hmm. A bit of redundancy there. You can eliminate it by using the defaultValue property:

<input
  type="text"
  onblur="this.value = this.value || this.defaultValue;"
  onfocus="this.value = '';"
  value="Text"
>

Stay away from XHTML at least until IE gets support.

[jscheuer1]

Hmm. A bit of redundancy there. You can eliminate it by using the defaultValue property:

<input
  type="text"
  onblur="this.value = this.value || this.defaultValue;"
  onfocus="this.value = '';"
  value="Text"
>

Stay away from XHTML at least until IE gets support.

I almost said this about eleven82's idea until I realized that it would all work out more or less, as any value I entered would be preserved unless I changed it. However, with this new twist, if I enter a value, blur the element, and then focus on it again, my value will be lost.

[Twey]

True... perhaps:

<input
  type="text"
  onblur="this.value = this.value || this.defaultValue;"
  onfocus="this.value == this.defaultValue && this.value = '';"
  value="Text"
>

[jscheuer1]

True... perhaps:

<input
  type="text"
  onblur="this.value = this.value || this.defaultValue;"
  onfocus="this.value == this.defaultValue && this.value = '';"
  value="Text"
>

That doesn't do anything, as far as I can see, that is different than an ordinary text input. Try:

<input
  type="text"
  onblur="this.value = this.value || this.defaultValue;"
  onfocus="this.value = this.value == this.defaultValue? '' : this.value;"
  value="Text"
>

[Twey]

That code performs exactly the same function as mine, as far as I can see. Have I missed something?

[jscheuer1]

That code performs exactly the same function as mine, as far as I can see. Have I missed something?

Testing in Opera? That is all I did and the difference there is like I said. Probably would be in others.

eleven82's not too pretty code worked fine too. None of this was what the OP asked for though.