jQuery浮动标签电子邮件

Question

美好的一天，

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

我尝试了仅使用CSS的解决方案，例如添加伪类.mat-input-outer输入：无效 +标签，但是最终将类应用于页面加载时的每个标签。

这是我的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！ ：）

用：有效替换该部分

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