Question

我有一个输入控件（文本框），如果值大于2000，则其颜色会更改。我想做的是删除文本框中的值时背景变为白色。

我尝试过：

document.getElementById("advance").style.background = '#FFFFFF';

但文本框仍具有红色背景。

if (document.getElementById("no_days").value <= 5) {
            var amt = document.getElementById("advance").value;
            if (amt > 2000) {
                alert("Eligible advance amount is upto 2000Rs");
                ready_to_send = false;
                    document.getElementById("advance").style.background = '#FF0000';
                return;
            }
        }

预期结果是当值大于2000时背景色为红色，而当我删除值时背景色变为白色。预先感谢。

Answer 1

如果要确保教科书的背景为空，则背景变为白色，可以在文本框中附加事件侦听器以进行更改，并确定文本框的值是否为空。

let textbox = document.getElementById("myInput");

textbox.addEventListener('input', function (evt) {
                console.log(this.value);
                //perform your inner logic here
});

Answer 2

更新的答案：监听两个事件，点击按钮和Inputchange。

解决方案是一个简单的else

button.addEventlistener('click', () => {
  if (document.getElementById("no_days").value <= 5) {
     var amt = document.getElementById("advance").value;
     if (amt > 2000) {
        alert("Eligible advance amount is upto 2000Rs");
        ready_to_send = false;
        document.getElementById("advance").style.background = '#FF0000';
   }})

input.addEventlistener('input', () => {
   if (document.getElementById("no_days").value <= 5) {
      var amt = document.getElementById("advance").value;
      if (amt <= 2000) {
         ready_to_send = true;
         document.getElementById("advance").style.background = '#FFF';
      }
   }
})

Answer 3

您可以将oninput事件侦听器添加到输入框，并为其分配一个函数，该函数将在每次输入更改时触发：

<input type="text" id="advance" oninput="myFunction()">

并添加由oninput事件调用的函数：

myFunction(){

var value = document.getElementById("advance").value; 

if(value.length == 0)
{
document.getElementById("advance").style.background = 'white';
}

if(value < 0)
{
//value not valid
//do something
}

}

Answer 4

您只使用javascript吗？

我的意思是，如果您使用其他框架（例如Vue.js），则那里存在问题。因为他们总是试图实时设置自己的风格。这意味着，如果我拖动按钮，则他们将设置新样式，以便我们可以看到它正在移动。

在这种情况下，我认为您应该将其设置为“白色！重要”，这将背景样式设置为更为重要。

我的答案是 document.getElementById（“ advance”）。style.background ='white！important';

删除值时将输入背景色更改为白色

4 个答案: