CSS Focus动画异常：点击Label无法触发输入框动画

我来帮你搞定这两个头疼的小问题：点击Label本身没反应、仅第一个Label能正常触发动画，其实根源都在细节上，咱们一步步来修：

问题1：Label点击无反应/仅第一个有效 #

你的HTML里所有Label的for属性都写的是name，但只有第一个Input的id是name，后面两个Input的id分别是email和pass。for属性的核心作用就是关联Label和对应Input——点击Label时会自动聚焦到对应id的Input上。后面两个Label的for和Input的id不匹配，所以点击它们根本触发不了Input的focus事件，动画自然就没反应啦。

问题2：JS循环的潜在隐患（可选优化） #

你用var i来循环绑定事件，var是函数级作用域，虽然这里因为事件处理函数用了this（指向当前触发事件的Input）没出大问题，但换成let会更安全，避免后续扩展代码时踩闭包的坑。

修复后的完整代码 #

HTML（修正for属性） #

<div class="box">
 <div class="frm">
 <center><h2>Simple Form</h2></center>
 <div class="line">
 <label for="name">Enter Your Name</label>
 <input type="text" id="name">
 </div>
 <div class="line">
 <label for="email">Enter Your Email</label>
 <input type="text" id="email">
 </div>
 <div class="line">
 <label for="pass">Enter Your Password</label>
 <input type="text" id="pass">
 </div>
 </div>
 </div>

JS（优化循环变量+更可靠的DOM选择） #

// 用querySelectorAll获取input，比getElementsByTagName更灵活；用let代替var
const inputs = document.querySelectorAll('input');
for (let i = 0; i < inputs.length; i++) {
 inputs[i].addEventListener('focus', show);
 inputs[i].addEventListener('focusout', hide);
}

function show() {
 // 用closest找父元素，比getElementsByTagName更稳定
 this.closest('.line').querySelector('label').classList.add('focused');
}

function hide() {
 this.closest('.line').querySelector('label').classList.remove('focused');
}

CSS（保持原有样式不变） #

body {
 background-color: #f5f5f5;
}
.frm{
 width:360px;
 margin:40px auto;
 box-shadow:0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.2);
 font-family:sans-serif;
 background:#fff;
 padding:20px;
}
.line{
 display:block;
 position:relative;
 margin-top:30px;
}
label{
 position:absolute;
 top:10px;
 left:0;
 transition:0.4s;
 z-index:10;
}
label.focused{
 transform: translateY(-125%);
 font-size: .75em;
}
input{
 padding: 12px 0px 5px 0;
 outline: 0;
 border: 0;
 width:100%;
 position:relative;
 box-shadow: 0 1px 0 0 #e5e5e5;
}

额外体验优化建议 #

可以给Input加个input事件监听，当Input里有内容时，即使失去焦点也保持Label上浮状态，体验会更友好：

// 新增input事件监听
inputs.forEach(input => {
 input.addEventListener('input', () => {
  const label = input.closest('.line').querySelector('label');
  if (input.value.trim()) {
   label.classList.add('focused');
  } else {
   // 只有当没有焦点且为空时才移除类
   if (!input.matches(':focus')) {
    label.classList.remove('focused');
   }
  }
 });
});

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