标签转换问题

Label transition issue

本文关键字：问题 转换 标签      更新时间：2023-09-26

我是新的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>

我已经试过了

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

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

看看这个小提琴，让我知道你的反馈。谢谢!

使用的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");
      }
    });
  });
相关文章：