New background colour on textbox when value gets changed?

I have this code:

var max1box = document.getElementById('length'),
    max2box = document.getElementById('width'),
    max1 = 100,
    min1 = 20,
    max2 = 400,
    min2 = 10;

 max1box.addEventListener('change',validateValues,false);
 max2box.addEventListener('change',validateValues,false);


function validateValues() {

    if (this == max1box &&
        +this.value > max1 &&
        +this.value > max2box.value)
    {
       max1box = max2box;
       max2box = this;  

    }

    if (max1box.value > max1) {
        max1box.value = max1;
    }
    if (max1box.value < min1) {
        max1box.value = min1;
    }        

    if (max2box.value > max2) {
        max2box.value = max2;
    }
    if (max2box.value < min2) {
        max2box.value = min2;
    }
   }

http://jsfiddle.net/LpmnY/

In the code there's a functio开发者_运维问答n which lowers the value of one box when a higher value is entered in the other box. What I would like is for the users to be alerted of this reduction in a nice way, as they might otherwise not notice it.

So is it possible to have the box where the value gets reduced get a different background colour when this reduction happens - and then go back to normal when the box is highlighted?

How about using the style attribute to add a colorful border?

function validateValues() {

    if (this == max1box &&
        +this.value > max1 &&
        +this.value > max2box.value)
    {
       max1box = max2box;
       max2box = this;  

    }

    if (max1box.value > max1) {
        max1box.value = max1;
        max1box.style.border = '2px solid red';

    }else if (max1box.value < min1) {
        max1box.value = min1;
        max1box.style.border = '2px solid blue';
    }   
    else max1box.style.border = 'auto';    

    if (max2box.value > max2) {
        max2box.value = max2;
        max2box.style.border = '2px solid green';

    }else if (max2box.value < min2) {
        max2box.value = min2;
        max2box.style.border = '2px solid yellow';

    }else max2box.style.border = 'auto';

   }

You can change the background colour with:

element.style.backgroundColor = "#ff0000";

Where element is a variable containing a DOM element (so in your case, max1box or max2box).

So you just need to add that into your function to change the colour of the appropriate input, and then use a similar line with a different colour to change it again.

max2box.style.backgroundColor = 'yellow';

I edited your fiddle http://jsfiddle.net/LpmnY/1/ (ok, it's not red) - when something is set to min it changes the background coloro of it

var max1box = document.getElementById('length'),
    max2box = document.getElementById('width'),
    max1 = 100,
    min1 = 20,
    max2 = 400,
    min2 = 10;

 max1box.addEventListener('change',validateValues,false);
 max2box.addEventListener('change',validateValues,false);


function validateValues() {

    if (this == max1box &&
        +this.value > max1 &&
        +this.value > max2box.value)
    {
       max1box = max2box;
       max2box = this;  

    }

    if (max1box.value > max1) {
        max1box.value = max1;

    }
    if (max1box.value < min1) {
        max1box.value = min1;
        max1box.style.backgroundColor= '#E5E5E5';
    }        

    if (max2box.value > max2) {
        max2box.value = max2;
    }
    if (max2box.value < min2) {
        max2box.value = min2;
        max2box.style.backgroundColor= '#E5E5E5';
    }
   }

$("#max1box").change(function() {
    $('max1box').css("backgroundColor","#F9F");
});