动态生成输入框样式设置：按必填性与内容显示不同背景色

首先咱们先梳理下你原代码里的几个核心问题：

• 触发blur事件时，你选中了所有input而非当前失去焦点的那个，导致所有输入框样式被批量修改
• CSS的:invalid伪类没有和required属性配合好，页面加载时必填输入框会直接显示红色，不符合交互预期
• 类的切换逻辑不完整，也没区分必填/非必填的场景

下面是完整的可落地实现方案，分三部分拆解：

1. 动态输入框的HTML规范 #

动态生成输入框时，给必填项加上required属性，非必填项留空即可：

<!-- 必填输入框 -->
<input type="text" class="dynamic-input" required placeholder="必填项">
<!-- 非必填输入框 -->
<input type="text" class="dynamic-input" placeholder="非必填项">

2. 样式逻辑优化（CSS） #

结合原生伪类和自定义类实现三种状态，同时避免页面加载时的异常样式：

/* 基础样式，可根据需求调整 */
.dynamic-input {
  padding: 8px;
  border: 1px solid #ccc;
  margin: 4px 0;
}

/* 1. 必填且为空：红色背景（排除焦点/未输入状态，避免干扰用户输入） */
.dynamic-input:required:invalid:not(:focus):not(:placeholder-shown) {
  background-color: #ffcccc;
}

/* 2. 非必填且为空：黄色背景 */
.dynamic-input:not(:required).empty {
  background-color: #fff3cd;
}

/* 3. 有内容的输入框：绿色背景 */
.dynamic-input.not-empty {
  background-color: #d4edda;
}

这里用:placeholder-shown伪类精准判断输入框是否为空（需要给input加placeholder），同时排除焦点状态，避免用户输入时样式跳变。

3. JavaScript交互逻辑（jQuery版本） #

修正事件绑定逻辑，针对当前输入框做状态判断，同时支持动态新增的输入框：

// 用事件委托绑定blur事件，支持动态新增的输入框
$(document).on('blur', '.dynamic-input', function() {
  const $currentInput = $(this);
  const inputValue = $currentInput.val().trim(); // 去掉首尾空格，避免空字符误判

  // 先清空所有状态类，避免样式冲突
  $currentInput.removeClass('empty not-empty');

  if (inputValue === '') {
    // 为空时，判断是否是必填项
    if ($currentInput.is('[required]')) {
      // 必填为空的样式靠CSS原生伪类控制，无需额外加类
      return;
    } else {
      $currentInput.addClass('empty');
    }
  } else {
    // 有内容时添加绿色状态类
    $currentInput.addClass('not-empty');
  }
});

// 可选：页面加载时初始化所有输入框的状态
$(document).ready(function() {
  $('.dynamic-input').trigger('blur');
});

如果你的输入框是后续动态新增的，一定要用$(document).on()这种事件委托方式，否则新增的输入框不会绑定交互逻辑。

额外小提示 #

• 如果不需要浏览器原生的表单验证提示，给包裹输入框的<form>标签加novalidate属性即可
• 用trim()是为了避免用户输入空格被误判为“有内容”的情况

内容的提问来源于stack exchange，提问作者Shane