HTML怎么做输入框聚焦动画_html输入框聚焦标签上移动画【教程】-html教程-PHP中文网

:focus无法单独实现标签上浮，因它仅响应焦点而不感知输入内容；需结合html结构包裹、css过渡及js监听value和focus/blur状态来驱动动画。

html怎么做输入框聚焦动画_html输入框聚焦标签上移动画【教程】

聚焦时标签上浮动画不是靠:focus单独实现的，必须配合结构包裹、CSS过渡和JavaScript状态监听，否则标签无法感知输入内容变化。

为什么单纯用:focus无法让label上浮

因为:focus只能响应焦点状态，但标签上浮通常要同时满足两个条件：输入框获得焦点或用户已输入内容。纯CSS无法判断value是否为空，所以必须引入状态标记（如class）来驱动动画。

:focus只在点击/Tab进入时触发，用户点开又点走、没输内容，label就不该上浮
用户粘贴文本、用JS赋值、或通过语音输入时，:focus不会再次触发，但label仍需上浮
移动端软键盘收起后，焦点可能还在，但用户已离开，label应还原——这需要监听blur而非仅依赖:focus

label上浮必须的HTML结构

label和input必须同级且顺序固定，推荐用<div class="input-group">包裹，label放在input前面或后面均可，但语义上label应在前： <pre class="brush:php;toolbar:false;"><div class="input-group"> <label for="name">姓名</label> <input type="text" id="name" name="name"> </div> </pre> <ul> <li>不要把label包在input外面（<code><label><input></label>），会导致焦点逻辑混乱、屏幕阅读器识别异常

必须设置for和id匹配，否则点击label无法聚焦input

避免用position: absolute强行定位label——它会脱离文档流，transition失效

用CSS transition实现平滑上浮

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

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

.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);
});