homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

Help with Form Field, OnFocus, OnBlur

5+ Year Member

Msg#: 4123559 posted 12:37 pm on Apr 28, 2010 (gmt 0)

I have some form fields with values of Name, Company, Email etc with OnFocus. So there a text input box says Company, and I want the user to put their Company Name in. Once they click on the box, the word Company disappears from the text box and then they need to put their Company name in.

But if they click on an text input box, and do not enter the information, I want the default value to return. Right now if I click on all the text input boxes and don't enter anything, they will all just be blank. So if someone clicks on the company name box, and doesn't enter the company name, and clicks on another form field, I want the word Company to reappear. How do I do this? I think its with OnBlur, but I don't know how to get it to work.

[edited by: tedster at 1:24 pm (utc) on Apr 28, 2010]
[edit reason] no personal URLs, please [/edit]



WebmasterWorld Senior Member dreamcatcher us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4123559 posted 6:55 am on Apr 29, 2010 (gmt 0)

<input type="text" name="company" onclick="this.value=''" onblur="this.value='Company'" value="Company" />



5+ Year Member

Msg#: 4123559 posted 12:23 pm on Apr 29, 2010 (gmt 0)

Ok I tried that out, and yes after you click on something else, company is put in the field. However if I do type some text in the form field, and move on, its still replaced with the word Company...

I only want the value to reappear in that form field if nothing is typed in the form field after clicking on it, if that makes sense.


WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member

Msg#: 4123559 posted 1:55 pm on Apr 29, 2010 (gmt 0)

function getFocus(inputEl) {
if (inputEl.value === inputEl.defaultValue) {
inputEl.value = "";
function loseFocus(inputEl) {
if (inputEl.value === "") {
inputEl.value = inputEl.defaultValue;

And then in each input element:

<input type="text" name="company" value="Company" onfocus="getFocus(this);" onblur="loseFocus(this);" />

Note, the loseFocus method checks to see if the value of the input field is an empty string. A good way to enhance this script would be to have it trim off any left and right whitespace before doing the check. For example, if the user clicks on the field and hits the space bar, that would cause the value not to be changed back to the default. I'll leave that as an exercise for you. :)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved