使用JS更改输入框的背景颜色
要更改输入字段的背景颜色，请将输入字段的 style.background 属性设置为特定颜色。 backgroundColor 属性更改元素的背景颜色。
这是此示例的 HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<input type="text" id="first_name" />
<button id="btn">Button</button>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const btn = document.getElementById('btn');
btn.addEventListener('click', function onClick(event) {
const input = document.getElementById('first_name');
input.style.backgroundColor = 'green';
// 👇️ optionally change the text color
// input.style.color = 'white';
});
我们为按钮添加了一个点击事件侦听器，因此每次单击按钮时，都会调用处理函数。
单击按钮时，我们访问输入元素并使用 style.backgroundColor 属性更改它的背景颜色。
当输入字段为空时更改背景颜色
要在输入字段为空时更改输入字段的背景颜色：
- 将输入事件侦听器添加到输入字段。
- 检查输入的值是否为空。
-
如果是，请将
style.backgroundColor属性设置为特定颜色。 -
否则，将
style.backgroundColor属性设置为空字符串。
这是此示例的 HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<input type="text" id="first_name" />
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const input = document.getElementById('first_name');
input.addEventListener('input', event => {
if (input.value === '') {
input.style.backgroundColor = 'lime';
} else {
input.style.backgroundColor = '';
}
});
我们在输入字段中添加了一个 oninput 事件。 每次输入字段的值更改时都会触发该事件。
我们检查输入的值是否为空，如果是，我们更新元素的背景颜色。如果该值不为空，我们将重置
backgroundColor属性。
我们可能会看到使用 onchange 事件而不是 oninput 的示例。
两者之间的区别在于 oninput 在值更改后立即触发，而 onchange 在元素失去焦点时发生。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
