如何在切换到下一个输入框时保留已填写输入框的聚焦状态样式

云上老周

2026-9-30

实现方案

优先方案：纯HTML+CSS实现（无需JS）

核心利用CSS的:valid伪类，只要输入框内容非空（需要搭配required属性），就会持续匹配该伪类，即使失去焦点也会保留样式，完全满足需求。

修改步骤：

给所有需要保留填写后样式的<input>标签添加required属性，修改后的输入框代码示例：

<input type="text" class="textfield w-input" maxlength="256" name="name" data-name="Name" placeholder="" id="name" required>
<!-- 第二个输入框同理添加required属性 -->
<input type="text" class="textfield w-input" maxlength="256" name="name-2" data-name="Name 2" placeholder="" id="name-2" required>

在现有CSS中追加.textfield:valid的样式规则，和你当前写的:focus样式保持一致即可：

.textfield:valid {
  border-style: none;
  background-color: #a6a8ab;
  color: #000;
  font-weight: 500;
}

说明：如果需要兼容点击过就算没填也要保留样式的特殊场景，可使用下方JS方案

兼容方案：极简JS实现（适配非必填等特殊场景）

如果存在非必填字段，不需要加required属性，只要用户填写过内容就保留样式，可以用以下方案实现：

先在CSS中追加填写后的样式类：

.textfield.filled {
  border-style: none;
  background-color: #a6a8ab;
  color: #000;
  font-weight: 500;
}

你的页面已经引入了jQuery，直接在页面底部</body>标签前追加以下JS代码即可：

$('.textfield').on('blur', function() {
  if($(this).val().trim().length > 0) {
    $(this).addClass('filled');
  } else {
    $(this).removeClass('filled');
  }
})

如果需要实现「只要点击过输入框，哪怕是空值也保留样式」的逻辑，去掉判断条件直接加类即可。