469,625 Members | 1,355 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,625 developers. It's quick & easy.

How to change background colour of form input field as soon as thevalue is changed?

Hi

How do I change the background colour of an input box in a form as soon
as the value is changed? Also the background should revert back to it's
original colour if the user decides that they do not want to make any
changes and hence retype back the orginial value.

I do not want the background to change after the user has moved to the
next form field but as soon as the value has been changed.

I am not sure how to start.

All your help will be appreciated.

Bundy

Oct 1 '06 #1
3 17067


Bundy wrote:

How do I change the background colour of an input box in a form as soon
as the value is changed? Also the background should revert back to it's
original colour if the user decides that they do not want to make any
changes and hence retype back the orginial value.

I do not want the background to change after the user has moved to the
next form field but as soon as the value has been changed.

You could use an onkeypress and/or onkeyup event handler and compare
this.value to this.defaultValue. Then you can set
this.style.backgroundColor as needed:

function setColor (control, color) {
if (control.style) {
if (control.value != control.defaultValue) {
control.style.backgroundColor = color;
}
else {
control.style.backgroundColor = '';
}
}
}

<input type="text"
value="initial value"
onkeypress="setColor(this, 'lightblue');"
name="inputName">
--

Martin Honnen
http://JavaScript.FAQTs.com/
Oct 1 '06 #2
Here's an idea...

You'd could capture the onBlur event (when the user LEAVES the input
field), and then check to see what the current value of that field is.
Compare it to the "default" value (the value you want it to be), and if
it's not a match, change the background color of the input field.

Bundy wrote:
Hi

How do I change the background colour of an input box in a form as soon
as the value is changed? Also the background should revert back to it's
original colour if the user decides that they do not want to make any
changes and hence retype back the orginial value.

I do not want the background to change after the user has moved to the
next form field but as soon as the value has been changed.

I am not sure how to start.

All your help will be appreciated.

Bundy
Oct 1 '06 #3
Thank you.

I have slightly modified the function provided by Martin Honnen and now
it works perfectly as I want it.

It was the onkeypress and onkeyup event handlers that I needed.

Regards

Bundy
Oct 1 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Wim Roffal | last post: by
4 posts views Thread by Semi Head | last post: by
10 posts views Thread by yawnmoth | last post: by
5 posts views Thread by Garry Jones | last post: by
4 posts views Thread by Bosconian | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.