使用 jQuery 输入表单的 javascript 效果

Question

我正在尝试复制我在表单网页上看到的效果。

当用户点击输入框插入文本时

1. 占位符标签移到顶部
2. 底线边框用动画突出显示

就像你在这里看到的那个，但是用 Angular 制作的:http://md-pro-angular.creative-tim.com/forms/wizard

我认为这提供了非常清晰有效的用户体验，尤其是在长表单上

你知道jquery有没有插件可以实现这样的效果？

Answer 1

这是一个仅使用 css 的类似解决方案，希望对您有所帮助。

input:focus~label,
input:valid~label
{
  font-size: 0.75em;
  color: #999;
  top: -2.25rem;
  transition: all 0.625s cubic-bezier(0.2, 0, 0.03, 1);
}

.styled-input {
  float: left;
  width: 33.3333%;
  margin: 2rem 0 1rem;
  position: relative;
}

.styled-input label {
  color: #999;
  padding: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.25s cubic-bezier(0.2, 0, 0.03, 1);
  pointer-events: none;
}

input {
  padding: 1rem 1rem;
  border: 0;
  border-bottom:1px solid #999;
  width: 84%;
  font-size: 1rem;
}

input~span {
  display: block;
  width: 0;
  height: 3px;
  background: #e91e63;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: all 0.625s cubic-bezier(0.2, 0, 0.03, 1);
}

input:focus {
  outline: 0;
}

input:focus~span {
  width: 100%;
  transition: all 0.625s cubic-bezier(0.2, 0, 0.03, 1);
}

<div class="styled-input">
  <input type="text" required />
  <label>Name</label>
  <span></span>
</div>