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

[Bundy]

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

[Martin Honnen]

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/

[Matthom]

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

[Bundy]

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