Question

我想重新创建如下效果（Hoshi）： https://tympanus.net/Development/TextInputEffects/

我已经查找了这个JS并且谷歌了一些验证器，但是当我输入文本到输入时，只是无法理解如何制作这个，标签保留在那里。在我的情况下，当我输入文本并离开输入时，标签会向下移动。

Answer 1

我已经创建了一个最小的例子来说明如何做到这一点。请参阅我在代码中的注释，以了解它的工作原理。

＆＃13;

$("#input").focus(function() {
  // If you enter the input

  $("#test").animate({ // Animate the text to the top
    top: "20px",
  }, 200, function() {});

}).blur(function() {
  // If you left the input

  if ($(this).val() == "") { // Only if the input is empty

    $("#test").animate({ // Animate the text back into the input
      top: "50px",
    }, 200, function() {});
  }
});

＆＃13;

#box {
  height: 100px;
  width: 100px;
  padding-top: 50px;
  position: relative;
}

#test {
  top: 50px;
  left: 5px;
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  <input type="text" id="input"><span id="test">Test</span>
</div>

＆＃13;

Answer 2

如果没有一行纯CSS的JavaScript，就可以轻松实现这样的功能。我在下面添加了一个片段来演示基本想法。我使用required attribute输入结合:valid css selector来检查输入是否为空。

＆＃13;

label {
  display: inline-block;
  margin-top: 20px;
  position: relative;
}

label > span {
  position: absolute;
  cursor: text;
  left: 2px;
  top: 1px;
  transition: top .2s ease;
  color: #3a3a3a;
}

label > input:focus + span,
label > input:valid + span{
  top: -20px;
}

＆＃13;

<label>
  <input required type="text" />
  <span>Surname</span>
</label>

＆＃13;

如何检查输入是否为空并将类应用于它？

2 个答案: