如何实现非required文本框聚焦时将placeholder作为标签显示？

我懂你的困扰啦——带required的输入框已经搞定了，但不带这个属性的输入框，因为没法依赖原生的伪类状态触发样式，原来的逻辑就失效了对吧？别担心，咱们用CSS+JavaScript的组合就能完美解决，不管有没有required都能正常工作。

实现思路 #

核心是给输入框加一个自定义类（比如has-content），用来标记输入框是否有内容或者处于聚焦状态，然后通过CSS来控制标签的显示位置和样式。

完整代码示例 #

HTML结构

先调整下HTML，把placeholder文本放到单独的<label>标签里（比用伪元素更灵活可控）：

<div class="input-group">
  <input type="text" class="inputText" placeholder="用户名">
  <label class="input-label">用户名</label>
</div>
<div class="input-group">
  <input type="text" class="inputText" required placeholder="必填邮箱">
  <label class="input-label">必填邮箱</label>
</div>

CSS样式

通过类和伪类配合，控制标签的位置和样式变化：

.input-group {
  position: relative;
  margin: 20px 0;
}

.inputText {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  background: transparent;
}

.input-label {
  position: absolute;
  left: 0;
  top: 10px;
  color: #999;
  transition: all 0.3s ease;
  pointer-events: none; /* 避免干扰输入框点击 */
}

/* 聚焦或有内容时，标签上移变小 */
.inputText:focus + .input-label,
.inputText.has-content + .input-label {
  top: -15px;
  font-size: 12px;
  color: #2196F3;
}

/* 带required的空输入框，保持标签上移并标红（可选，根据需求调整） */
.inputText:required:invalid:not(:focus) + .input-label {
  top: -15px;
  font-size: 12px;
  color: #f44336;
}

JavaScript逻辑

监听输入框的输入和失焦事件，动态添加/移除状态类：

const inputElements = document.querySelectorAll('.inputText');

inputElements.forEach(input => {
  // 初始化：如果输入框已有内容，直接添加类
  if (input.value.trim() !== '') {
    input.classList.add('has-content');
  }

  // 输入时更新状态类
  input.addEventListener('input', () => {
    input.classList.toggle('has-content', input.value.trim() !== '');
  });

  // 失焦时也检查状态（比如用户输入后又清空内容）
  input.addEventListener('blur', () => {
    if (input.value.trim() === '') {
      input.classList.remove('has-content');
    }
  });
});

方案优势 #

• 不管输入框有没有required属性，JS都会根据内容状态同步类名，CSS通过类名统一控制标签样式，完美适配两种场景。
• 带required的输入框还保留了原生校验的样式反馈，不影响原有功能。
• 兼容性拉满，没有特殊伪类的兼容性问题，主流浏览器都能正常运行。

你直接把这段代码复制过去测试就行，不管是带还是不带required的输入框，点击时标签都会自动上移，输入内容后保持在上方，清空内容后又会回到初始位置~

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