Question

我创建了这个函数，当输入有焦点时，它会激活标签。

$("input").on("focus", function () {
  $(this).siblings().animate({
    top: "-20",
  }, 70, function() {
  });
});

如果输入未填充，我想将其设置为动画。

Here是我的codepen

Answer 1

$("input").on("focus", function () {
  $(this).siblings().animate({
    top: "-20",
  }, 70, function() {
  });
});

$("input").on("blur", function() {
  if( $(this).val().length == 0 ) {
    $(this).siblings().animate( {
      top : "0"
    });
  }
});

http://codepen.io/anon/pen/VavgLv

Answer 2

我建议：

$("input").on({
  // using an Object with event-names as the
  // keys, linking to the functions
  // to handle those events:
  'focus': function() {
    $(this).siblings().animate({
      'top': '-20',
    }, 70);
  },
  // handling the 'blur' event on the input:
  'blur': function() {
    // if the value of the <input> element, with
    // leading and trailing white-space removed,
    // is equal to the default value of the <input>
    // (the value it held on page-load)
    // we animate the 'top' CSS property back to 0:
    if (this.value.trim() == this.defaultValue) {
      $(this).siblings().animate({
        'top': 0
      }, 70);
    }
  }
});

$("input").on({
  'focus': function() {
    $(this).siblings().animate({
      'top': '-20px',
    }, 70);
  },
  'blur': function() {
    if (this.value.trim() == this.defaultValue) {
      $(this).siblings().animate({
        'top': 0
      }, 70);
    }
  }
});

div {
  margin: 1em;
  padding: 0;
  border-radius: 1em;
  position: relative;
}
label {
  position: absolute;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <fieldset>
    <div>
      <label for="input1">input 1</label>
      <input type="text" id="input1">
    </div>
    <div>
      <label for="input2">input 2</label>
      <input type="text" id="input2">
    </div>
    <div>
      <label for="input3">input 3</label>
      <input type="text" id="input3">
    </div>
    <div>
      <label for="input4">input 4</label>
      <input type="text" id="input4">
    </div>
    <div>
      <label for="input5">input 5</label>
      <input type="text" id="input5">
    </div>
  </fieldset>
</form>

JS Fiddle demo

检查当前值是否等于默认值（this.value.trim() === this.defaultValue）的原因是确保如果用户没有输入任何值，<label>将返回其原始位置，我们会修剪该字符串（删除前导和尾随空格）作为对在该字段中仅输入空白区域的用户的检查。

有了一些限制，可以使用纯CSS部分实现;对此的警告是：

<input>元素必须位于标记中的<label>元素之前，
<input>元素必须同时包含required属性和属性，例如minlength，maxlength或pattern才能识别'有效' 'entry

考虑到这些限制，以下是可能的：

<form action="">
  <fieldset>
    <div>
      <!-- the <input> here precedes the <label> in order that
           the <label> can be styled based on the state of the
           <input> element.

           Also the 'minlength' attribute is present, to allow
           CSS to determine whether the entered value is
           valid or invalid, with the required attribute -->
      <input type="text" id="input1" required minlength="5" />
      <label for="input1">input 1</label>
    </div>
    <!-- repeated elements removed for brevity -->
  </fieldset>
</form>

/* Here we style the <label> element's default state,
   and the state when it follows an invalid <input>: */
label,
input:invalid + label {
  position: absolute;
  top: 1px;
  left: 0.5em;
  /* we set the transition for the element, to work on
     the 'top' property, to take effect over 0.7 seconds
     with a linear progression from start to end: */
  transition: top 0.7s linear;
  background-color: #fff;
}

/* Here we set the styles for the <label> when the preceding
   <input> has focus, and when it has a valid entry, and is
   positioned above its preceding <input>: */
input:focus + label,
input:valid + label {
  top: -20px;
}

div {
  margin: 1em;
  padding: 0;
  border-radius: 1em;
  position: relative;
}
label,
input:invalid + label {
  position: absolute;
  top: 1px;
  left: 0.5em;
  transition: top 0.7s linear;
  background-color: #fff;
  box-sizing: content-box;
  padding: 0;
}
input:focus + label,
input:valid + label {
  top: -20px;
}

<form action="#">
  <fieldset>
    <div>
      <input type="text" id="input1" required minlength="5" />
      <label for="input1">input 1</label>
    </div>
    <div>
      <input type="text" id="input2" required minlength="5" />
      <label for="input2">input 2</label>
    </div>
    <div>
      <input type="text" id="input3" required minlength="5" />
      <label for="input3">input 3</label>
    </div>
    <div>
      <input type="text" id="input4" required minlength="5" />
      <label for="input4">input 4</label>
    </div>
    <div>
      <input type="text" id="input5" required minlength="5" />
      <label for="input5">input 5</label>
    </div>
  </fieldset>
</form>

JS Fiddle demo

参考文献：

CSS：
- :valid and :invalid selectors。
JavaScript的：
- String.prototype.trim()。
jQuery的：
- animate()。
- on()。
- siblings()。

Answer 3

我使用focusout事件，当输入失去焦点时，它是相反的，here's the snippet

以下是代码：

$("input").on("focus", function () {
  $(this).siblings().animate({
    top: "-20",
  }, 70);
}).on("focusout", function () {
  if( $(this).val().length == 0 ) {
      $(this).siblings().animate({
         top: "0",
      }, 70);
  }
});

Answer 4

当一个元素（或其中的任何元素）失去焦点时，会发生focusout事件。

$("input").on("focusout", function() {
  if( $(this).val().length == 0 ) {
    $(this).siblings().animate( {
      top : "0"
    });
  }
});

希望它也有帮助：）

jQuery检测输入是否已填满

4 个答案: