Erasing the contents of an input / textarea when it's clicked?

Question

Hi there,

to make editing of these fields easier, I'd be nice if their contents were deleted when they're clicked. Also, the default value (presented initially) needs to be submitted if it hasn't changed, this means I'm (probably) not looking for a(n HTML 5) placeholder which gets erased automatically, but actual text. Would be even better if the default value would return if the field is deselected and left blank.

Any suggestions?

Thanks a lot :-).

P.S: Example: the "your email" input at the top of http://www.makeuseof.com/.

Answer 1

Try it with onfocus:

<input type="text" value="Default text" onfocus="this.value = ''">

Answer 2

<input type="text" value="Something" onfocus="if (this.value == this.defaultValue) this.value='';" onblur="if (this.value == '') this.value = this.defaultValue;">

If you want to use it in more than one element, you should extract the event handlers to an external function/script.

EDIT:

When using an external function, you'll need to provide a reference to the input element as a parameter to the function.

<script type="text/javascript">
    function focused(element){if (element.value == element.defaultValue) element.value='';}
    function blurred(element){if (element.value == '') element.value = element.defaultValue;}
</script>

<input type="text" value="Default Value" onfocus="focused(this)" onblur="blurred(this)">

NB: In JavaScript it is convention to have functions start with a small letter.