Form Query

[e1seix]

hello. i have a query about the <form> tag.

what i'm looking to do is, i have a search form on my site. for the purposes of the client this input box is filled with the words "keyword search" in order to guide them.

what i want to know is how can i code it so that when the client clicks on the input box to enter their search the "keyword search" automatically disappears and they don't have to manually delete the phrase.

can anyone help?

very much appreciated

[Twey]

<input
  type="text"
  onfocus="this.value === this.defaultValue && (this.value = '');"
  onblur="this.value = this.value || this.defaultValue;"
  name="search"
  value="keyword search"
>

[boogyman]

<input
  type="text"
  onfocus="this.value === this.defaultValue && (this.value = '');"
  onblur="this.value = this.value || this.defaultValue;"
  name="search"
  value="keyword search"
>

that would be a *beep* to type out every time.

<script type="text/javascript">
function clearDefault(el) {
       if (el.defaultValue==el.value) el.value = ""
}
function restoreDefault(el) {
       if (el.value!=el.defaultValue || el.value="")el.value = el.defaultValue
}
</script>

<input type="text" name="something" onfocus="clearDefault(this)" onblur="restoreDefault(this)">

[Twey]

It's not that long (lengthened somewhat in your version, however). I also like to avoid making functions out of anything that'll fit in a single statement where possible, except for semantics and compatibility.

I suspect that you've made an error here:

if (el.value!=el.defaultValue || el.value="")el.value = el.defaultValue

This will erase the user's entry every time s/he removes focus from the input (e.g. in order to click the submit button). I doubt this is what was intended.

Ideally, the whole code would be made unobtrusive and apply the handlers dynamically based on a CSS class. However, that's much too complex for a simple example such as this.