Welcome to WebmasterWorld Guest from 54.160.221.82

Forum Moderators: incrediBILL

Message Too Old, No Replies

Help with Form Field, OnFocus, OnBlur

     
12:37 pm on Apr 28, 2010 (gmt 0)

New User

5+ Year Member

joined:June 26, 2009
posts: 6
votes: 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]

6:55 am on Apr 29, 2010 (gmt 0)

Senior Member

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

joined:Mar 30, 2003
posts:3719
votes: 0


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

dc
12:23 pm on Apr 29, 2010 (gmt 0)

New User

5+ Year Member

joined:June 26, 2009
posts: 6
votes: 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.
1:55 pm on Apr 29, 2010 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4965
votes: 10



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. :)