Question

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

如果是第一个标签，如果我点击标签或标签右侧两者都完美，但仅限于第一个标签。

我不知道我在做什么错误

Codepen Link https://codepen.io/nitishk72/pen/GdBegz

＆＃13;

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')
                       
}

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 2

更改标签for，如

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

Answer 3

您提供错误的VARCHAR() FOR BIT DATA值。

for值和for值应始终相同。

＆＃13;

id

＆＃13;

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')
                       
}

＆＃13;

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

＆＃13;

Answer 4

您的代码很好，您只需为错误的元素添加标签。

例如：

<div class="line">
  <label for="name">Enter Your Password</label>
  <input type="text" id="pass">
</div>

在for属性中，您应该给出标签所指向的元素的id。在您的情况下，所有标签都指向具有id="name"的元素。

只需将for="name"更改为for="pass"。

Answer 5

只需在你的css中添加以下新属性并检查

input{
   z-index:11;
    background:none;
    position:relative;
}
input:hover{
 cursor: default;
}
input:focus{
 cursor: auto;
}

css焦点动画不能正常工作？

5 个答案: