Clearing the pre-filled value from a Form field automatically

Form Properties

[keyplyr]

I have a user-side form to retrieve results from db. In this tag....

<input type="text" name="Zip" value=" Zip" size="5" maxlength="5">

....I have the word "Zip" showing the the textbox so the user knows what is supposed to be there. However some users are not deleting the word, thus incorrectly entering only a partial zip code.

I have seen other pages where the word vanishes when the cursor is placed inside the textbox. How is this done? Thanks.

[pageoneresults]

Something like this...

<script>
function cleartext(thefield){
if (thefield.defaultvalue==thefield.value)
thefield.value = ""
}
</script>

Search your favorite SE for javascript clear form field

[RonPK]

A bit of JavaScript:

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

[keyplyr]

RonPK, thanks but doesn't seem to be working.

[Elijah]

The following code will make the field become blank as soon as it is clicked.

<input type="text" name="Zip" value=" Zip" size="5" onfocus="value=''" maxlength="5"> 

Elijah

[keyplyr]

That's it - thanks Elijah.

[pageoneresults]

Now, how simple was that? ;) Thanks Elijah.

I added that one to my snippet library. Rarely have a need to use it, but it is the shortest and simplest solution I've seen.

onfocus="value=''"

[Shannon Moore]

Not knocking the short and elegant solution proposed, but the following is just the usability fiend in me --

This code could also cause some user frustration, causing data they've entered to be "deleted" if they fill out a form field and then click on it again -- such as to correct a typo.

Just something to consider when implementing this.

I think ZIP code's a perfect example of where it'd be well-suited and not unduly detrimental; minimal retyping would be needed if the user did indeed return to the ZIP field and unintentionally wipe it out on click... but it'd be a pain to have to rekey a street address, email address, etc.

[keyplyr]

BTW pageoneresults, thank you for your response and example.

[RonPK]

I agree with Shannon. My code prevents that problem from occuring - and it works fine on all sites that I've used it on. Keyplyr, maybe you could provide a bit more information on what you've done and what error the browser reported?

[killroy]

You could shorten it just a little:

<input type="text" value="zip" onfocus="(value=='zip')?value='':;">

I don't think the onblur is needed...

SN

[lorax]

I've used:

onClick="value=''"

[keyplyr]

Keyplyr, maybe you could provide a bit more information on what you've done and what error the browser reported? - RonPK

No errors, it just didn't do anything at all. Thanks for taking the time to help. As I said, the code Elijah suggested is doing what I wanted

And Shannon, thanks for the heads-up. I can't think of a reason why I would want to delete pre-filled text boxes in anything other than the example I gave, but I wouldn't have thought of that scenario.

And thanks Lorax, good to know there is an alternative. Also this helps to build the information archive at WebmasterWorld.