html - 字段输入后的颜色变化 - CSS

Question

是否有任何可用于突出显示所有填充字段的 css 属性？就像我们所做的那样，关注 css 属性。

input[type="text"] {
  background-color: white;
}
input[type="text"]:focus {
  background-color: red;
}

<input type="text">

当字段中有东西时，我想将字段背景色设为绿色。这可能通过 CSS 实现吗？如果不是CSS，还有其他方法吗？

Answer 1

当然，您可以使用 javascript 实现这一点。

下面的脚本将监听 keyup在焦点转移到任何一个 <input> 之后字段。

然后它将检查相应的 <input>字段为空。

如果不是，它将更改 <input> 的背景字段变为绿色。

var inputs = document.querySelectorAll('input[type="text"]');

function detectContent() {
    if (this.value !== '') {
        this.style.backgroundColor = 'green';
        this.style.color = 'white';
    } else {
        this.style.backgroundColor = 'white';
        this.style.color = 'black';
    }
}


for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    input.addEventListener('keyup', detectContent, false);
}

<input type="text" />

<input type="text" />

<input type="text" />