使用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 在元素失去焦点时发生。
相关文章
使用 CSS 和 JavaScript 制作文本闪烁
发布时间：2023/04/28 浏览次数：146 分类：CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间：2023/03/29 浏览次数：69 分类：PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
在 JavaScript 中获取字符串的最后一个字符
发布时间：2023/03/24 浏览次数：141 分类：JavaScript
-
本教程展示了在 javascript 中获取字符串最后一个字符的方法
