值更改时文本框上的新背景颜色

New background colour on textbox when value gets changed?

本文关键字：新背景 背景 颜色 文本      更新时间：2023-09-26

我有这个代码：

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/

代码中有一个函数，当在另一个框中输入更高的值时，它会降低一个框的值。我想让用户以一种很好的方式注意到这种减少，否则他们可能不会注意到

那么，当这种减少发生时，是否可以让值减少的框获得不同的背景色，然后在框突出显示时恢复正常？

使用样式属性添加彩色边框怎么样？

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';
   }

您可以使用更改背景颜色

element.style.backgroundColor = "#ff0000";

其中，element是一个包含DOM元素的变量（在您的情况下，是max1box或max2box）。

因此，您只需要将其添加到函数中，即可更改相应输入的颜色，然后使用具有不同颜色的类似行再次进行更改。

max2box.style.backgroundColor = 'yellow';
我编辑了你的小提琴http://jsfiddle.net/LpmnY/1/（好吧，它不是红色的）-当某个东西被设置为最小值时，它会改变的背景颜色 
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");
});
相关文章：