javascript - css 焦点动画无法正常工作？

Question

我刚刚用简单的动画构建了这个输入框。这段代码的工作方式是这样的，当你点击输入字段然后标记时，它会上升，但问题是当我点击标签时它不起作用，当我点击标签右侧时它会完美地工作。

在第一个标签的情况下，如果我单击标签或标签的右侧，两者都可以正常工作，但仅在第一个标签的情况下。

我不知道我做错了什么

Codepen 链接 https://codepen.io/nitishk72/pen/GdBegz

var input = document.getElementsByTagName('input')
for (var i=0;i<input.length;i++){
  input[i].addEventListener('focus',show);
  input[i].addEventListener('focusout',hide);
}
function show(){
  this.parentNode.getElementsByTagName('label')[0].classList.add('focused')
}

function hide(){
  this.parentNode.getElementsByTagName('label')[0].classList.remove('focused')
                       
}

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

<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="name">Enter Your Email</label>
      <input type="text" id="email">
    </div>
    <div class="line">
      <label for="name">Enter Your Password</label>
      <input type="text" id="pass">
    </div>
  </div>
</div>

Answer 1

您的 for 属性在第二个和第三个标签上是错误的(它们都链接到第一个输入 id):

var input = document.getElementsByTagName('input')
for (var i=0;i<input.length;i++){
  input[i].addEventListener('focus',show);
  input[i].addEventListener('focusout',hide);
}
function show(){
  this.parentNode.getElementsByTagName('label')[0].classList.add('focused')
}

function hide(){
  this.parentNode.getElementsByTagName('label')[0].classList.remove('focused')
                       
}

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

<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>