输入框聚焦动画实现教程

<div class="input-group">
  <label for="name">姓名</label>
  &lt;input type=&quot;text&quot; id=&quot;name&quot; name=&quot;name&quot;&gt;
</div>

• 不要把label包在input外面（<input>），会导致焦点逻辑混乱、屏幕阅读器识别异常
• 必须设置for和id匹配，否则点击label无法聚焦input
• 避免用position: absolute强行定位label——它会脱离文档流，transition失效

用CSS transition实现平滑上浮

核心是控制label的transform: translateY()和font-size，并用transition限定只动这两个属性：

.input-group label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 0;
  font-size: 16px;
  color: #999;
  transition: transform 0.2s ease, font-size 0.2s ease;
  pointer-events: none;
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group input.has-value + label {
  transform: translateY(-20px);
  font-size: 12px;
  color: #007bff;
}

• :not(:placeholder-shown)可检测是否有输入（前提是设置了placeholder），但不兼容IE
• input.has-value是更可靠的方式，由JS动态添加/移除
• 务必加pointer-events: none，否则label会挡住input的点击区域
• 别写transition: all——它会让color等无关属性也参与过渡，造成闪烁

JS监听输入状态补全边界情况

CSS方案在粘贴、剪切、语音输入、清空后回删等场景下容易失步，必须用JS兜底：

const input = document.getElementById('name');
const label = input.nextElementSibling;

const updateLabelState = () => {
  if (input.value.trim() || document.activeElement === input) {
    input.classList.add('has-value');
  } else {
    input.classList.remove('has-value');
  }
};

input.addEventListener('input', updateLabelState);
input.addEventListener('focus', updateLabelState);
input.addEventListener('blur', () => {
  setTimeout(() => updateLabelState(), 0);
});

• setTimeout(..., 0)确保blur后DOM更新完成再检查value，避免因异步导致label残留上浮态
• 不要只监听change——它只在失焦后触发，无法响应实时输入
• 移动端iOS Safari对input事件有延迟，可额外监听compositionstart/compositionend处理中文输入法

最容易被忽略的是：label上浮动画在高DPI屏幕或缩放页面下可能错位，必须用transform: translateY()而非top，且所有单位统一用px或rem，别混用em和%。

本篇关于《输入框聚焦动画实现教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！