By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,749 Members | 1,627 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,749 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
3 Replies


P: n/a


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

P: n/a
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

P: n/a
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.