js判断input值改变颜色

在JavaScript中，可以通过监听input元素的input事件来判断其值是否改变，并根据值的改变来动态改变其颜色。以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Value Change Color</title>
<style>
  .default-color {
    color: black;
  }
  .changed-color {
    color: red;
  }
</style>
</head>
<body>

<input type="text" id="myInput" class="default-color">

<script>
  const inputElement = document.getElementById('myInput');
  let previousValue = inputElement.value;

  inputElement.addEventListener('input', function() {
    if (inputElement.value !== previousValue) {
      inputElement.classList.remove('default-color');
      inputElement.classList.add('changed-color');
      previousValue = inputElement.value;
    } else {
      inputElement.classList.remove('changed-color');
      inputElement.classList.add('default-color');
    }
  });
</script>

</body>
</html>

解释

HTML部分：创建一个input元素，并给它一个初始的CSS类default-color，用于设置默认的文字颜色。
CSS部分：定义两个类，default-color和changed-color，分别用于设置输入框文字的默认颜色和改变后的颜色。
JavaScript部分：
- 获取input元素的引用。
- 存储input元素的初始值。
- 添加一个事件监听器来监听input事件，这个事件会在输入框的值改变时触发。
- 在事件处理函数中，检查当前值是否与之前的值不同。如果不同，说明值发生了改变，移除默认颜色类并添加改变后的颜色类，同时更新之前值的记录。如果相同，则恢复默认颜色。