正文

轻松让文本框变红：用JavaScript实现文本框颜色改变技巧

/0 浏览量
0422

在网页设计中，改变文本框的颜色是一种常见的交互效果，可以让用户更加直观地感受到输入框的状态。今天，我们就来学习如何使用JavaScript轻松实现文本框颜色的改变，让文本框变成红色。

1. HTML结构

首先，我们需要一个文本框元素。这里我们使用<input>标签创建一个文本框。

<input type="text" id="myInput" placeholder="请输入内容">

2. CSS样式

接下来，我们为文本框添加一些基本的样式。这里我们将文本框的背景颜色设置为白色，并设置一个边框。

#myInput {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  background-color: white;
}

3. JavaScript实现

现在，我们来编写JavaScript代码，实现文本框颜色的改变。当用户点击文本框时，我们将文本框的背景颜色改为红色；当用户离开文本框时，文本框的背景颜色恢复为白色。

// 获取文本框元素
var input = document.getElementById('myInput');

// 为文本框添加点击事件监听器
input.addEventListener('click', function() {
  this.style.backgroundColor = 'red';
});

// 为文本框添加失去焦点事件监听器
input.addEventListener('blur', function() {
  this.style.backgroundColor = 'white';
});

4. 完整代码

将以上HTML、CSS和JavaScript代码合并，即可实现文本框颜色的改变。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文本框颜色改变</title>
  <style>
    #myInput {
      width: 200px;
      height: 30px;
      border: 1px solid #ccc;
      background-color: white;
    }
  </style>
</head>
<body>
  <input type="text" id="myInput" placeholder="请输入内容">
  <script>
    var input = document.getElementById('myInput');
    input.addEventListener('click', function() {
      this.style.backgroundColor = 'red';
    });
    input.addEventListener('blur', function() {
      this.style.backgroundColor = 'white';
    });
  </script>
</body>
</html>

5. 总结

通过以上步骤，我们成功地使用JavaScript实现了文本框颜色的改变。在实际应用中，你可以根据需求调整文本框的样式和颜色，以达到更好的视觉效果。希望这篇文章能帮助你掌握文本框颜色改变技巧。

-- 展开阅读全文 --