jquery浮动标签电子邮件

Question

早安，

我正在处理带有浮动标签的表单。标签浮动很好，除了 type=email 的输入字段。用户在字段中输入文本，如果文本无效，当用户移动到下一个字段时，标签将停止浮动。

我尝试过仅使用 css 的解决方案，例如添加伪类 .mat-input-outer input:invalid + 标签，但最终会在页面加载时将该类应用于每个标签。

这是我的 jQuery：

$(function () {
     $('.mat-input-outer label').click(function () {
          $(this).prev('input').focus();
     });
     $('.mat-input-outer input').focusin(function () {
          $(this).next('label').addClass('active');
     });
     $('.mat-input-outer input').focusout(function () {
          if (!$(this).val()) {
               $(this).next('label').removeClass('active');
          } else {
               $(this).next('label').addClass('active');
          }
     });
});

还有我的 HTML：

<div class="mat-input">
  <div class="mat-input-outer">
    <input type="text" placeholder=" " id="name" name="name" required>
    <label for="Name" class="">Name</label>
    <div class="border"></div>
  </div>
</div>
<div class="mat-input">
  <div class="mat-input-outer">
    <input type="email" placeholder=" " id="email" name="email" required>
    <label for="email" class="">Email Address</label>
    <div class="border"></div>
  </div>
</div>

最后，fiddle。

Answer 1

更改 CSS，下面有一个工作示例
为了未来！ - 在大多数情况下，css 会破坏您的 jquery 脚本：/
如果您正在制作交互式表单，请尝试将 jquery 用于所有内容！ :)

将带有 :valid 的部分替换为此

.mat-input-outer .active {
  top: -15px;
  color: #757575;
  opacity: 1;
  filter: alpha(opacity=100);
} 

// Activate Floating Label - Input
$(function() {
  $('.mat-input-outer label').click(function() {
    $(this).prev('input').focus();
  });
  $('.mat-input-outer input').focusin(function() {
    $(this).next('label').addClass('active');
  });
  $('.mat-input-outer input').focusout(function() {
    if ($(this).val().length <= 0) {
      $(this).next('label').removeClass('active');
    } else {
      $(this).next('label').addClass('active');
    }
  });
});

.mat-input {
  margin: 2% auto;
  margin-bottom: 30px;
}

.mat-input-outer {
  display: table;
  width: 100%;
  position: relative;
	font-family: arial;
}

.mat-input-outer textarea {
  resize: none;
  display: inline-block;
  vertical-align: middle;
  margin-top: 16px;
  min-height: 0;
}

.mat-input-outer input {
  height: 50px;
}

.mat-input-outer input,
.mat-input-outer textarea {
  border-radius: 0;
  border: none;
  width: 100%;
  padding: 6px;
  color: #757575;
  font-family: "museo-sans", sans-serif;
  font-size: 16px;
  background: transparent;
	outline: none;
}

.mat-input-outer label {
  position: absolute;
  top: 12px;
  transition: .2s;
  color: #757575;
  cursor: text;
  margin-left: 6px;
}

.mat-input-outer .border {
  height: 1px;
  background: #757575;
  transition: .3s;
  -webkit-transition: .3s;
  -ms-transition: .3s;
}

.mat-input-outer .border::before {
  content: " ";
  display: table;
  height: 2px;
  width: 0%;
  background: transparent;
  transition: .3s;
  -webkit-transition: .3s;
  -ms-transition: .3s;
  margin: 0 auto;
}

.mat-input-outer input:focus~.border,
.mat-input-outer textarea:focus~.border {
  background: transparent;
}

.mat-input-outer input:focus~.border::before,
.mat-input-outer textarea:focus~.border::before {
  width: 100%;
  background: #2B6FD7;
}

.mat-input-outer input:not(:placeholder-shown)~.border::before,
.mat-input-outer textarea:not(:placeholder-shown)~.border::before {
  width: 100%;
  background: #757575;
}

.mat-input-outer input:focus+label,
.mat-input-outer textarea:focus+label {
  top: -15px;
  color: #2B6FD7;
  opacity: 1;
  filter: alpha(opacity=100);
}

.mat-input-outer .active {
  top: -15px;
  color: #757575;
  opacity: 1;
  filter: alpha(opacity=100);
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mat-input">
  <div class="mat-input-outer">
    <input type="text" placeholder=" " id="name" name="name" required>
    <label for="Name" class="">Name</label>
    <div class="border"></div>
  </div>
</div>
<div class="mat-input">
  <div class="mat-input-outer">
    <input type="email" placeholder=" " id="email" name="email" required>
    <label for="email" class="">Email Address</label>
    <div class="border"></div>
  </div>
</div>