javascript - 完成后更改文本输入背景，不包括占位符

Question

我想在用户输入一些文本时更改输入背景颜色，但我的输入也有一个占位符，我不希望仅更改占位符内容的颜色。

我如何使用纯 Javascript 实现这一目标？

<input type="text" placeholder="Enter your email adress">

if (formInput.length > 0) {
    formInput[0].style.backgroundColor = "#f9f9f9";
}

as 你可以想象这会改变背景颜色，即使在页面加载时其中包含占位符也是如此。

Answer 1

检查输入值的长度。此外，当输入中没有内容时重置颜色。

(颜色改为红色更明显)

let input = document.querySelector('input');

input.addEventListener('input', function() {
  this.style.backgroundColor = (this.value.length > 0) ? 'lightcoral' : '';
});

<input type="text" placeholder="Enter your email adress">