标签转换问题答案

【问题标题】：Label transition issue标签转换问题
【发布时间】：2017-09-02 10:51:18
【问题描述】：

我是 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"
}
});
});

【问题讨论】：

你遇到了什么错误？
如果用户输入无效的电子邮件地址或在名称字段中输入少于 3 个输入标签失败

标签： javascript jquery html css css-selectors

【解决方案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");
      }
    });
  });

【讨论】：