javascript - 标签过渡问题

Question

我是 html、css 的新手，当用户在输入框中输入无效输入时出现错误，然后特定输入字段的标签消失但是当用户输入时正确输入然后它的工作正常。

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
    <form id="form">
    <div class="group">
    <input type="text" required id="name" minlength="4">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label class="labeling">Name</label>
    </div>
    <div class="group">
    <input type="email" required id="email">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label class="labeling">Email</label>
    </div>
    </form>

我试过了this

<form id="form">
<div class="group">      
<input type="text" required id="name" minlength="4">
<span class="highlight"></span>
<span class="bar"></span>
<label class="labeling">Name</label>
</div>
<div class="group">      
<input type="email" required id="email">
<span class="highlight"></span>
<span class="bar"></span>
<label class="labeling">Email</label>
</div>
</form>
.group {
margin-top: 40px;
position: relative;
margin-bottom: 45px;
}
input {
font-size: 22px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #ccc;
}
input:focus {
outline: none;
}
label.labeling {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
}
input:focus ~ label.labeling,
input:valid ~ label.labeling {
top: -20px;
font-size: 14px;
color: #5264AE;
}
.bar {
position: relative;
display: block;
width: 309px;
}
.bar:before,
.bar:after {
content: '';
height: 1px;
width: 0;
bottom: 1px;
position: absolute;
transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus ~ .bar:before,
input:focus ~ .bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset; 
}
$(document).ready(function() {
$("#form").validate({
rules: {
name: {
required: true
},
email: {
required: true
}
},
messages: {
minlength: "your name at least 4 characters long",
email: "Please enter a valid email address"
}
});
});

Answer 1

你也必须在这里使用一些 JS，因为输入框没有 :empty css 属性。(使用 :invalid 将意味着你的占位符设置不会工作!)

看看这个 fiddle让我知道你的反馈。谢谢!

使用这个 CSS:

input.invalid-input ~ label.labeling {
  top: -20px;
  font-size: 14px;
  color: red;
}

也添加了一些js:

  $("input").each(function() {
    var $this = $(this);
    $this.on("change", function() {
      if ($(this).is(':invalid') && $(this).val() != "") {
        $(this).addClass("invalid-input");
      } else {
        $(this).removeClass("invalid-input");
      }
    });
  });