一个字母后如何使输入无效

Question

H-I

这是我的输入

.centered-name 
{
  width: 80%;
  margin: auto;
}
.group {
  width: 100%;
  overflow: hidden;
  position: relative;
} 
.label {
  position: absolute;
  top: 40px;
  color: #666666;
  font: 400 26px Roboto;
  cursor: text;
  transition: 0.3s ease;
  width: 100%;
  text-align: center;
}

.input {
  display: block;
  width: 100%;
  padding-top: 36px;
  border: none;
  border-radius: 0;
  font-size: 30px;
  transition: .3s ease;
  text-align: center;
}
.input:valid ~ .label 
{
  top: 3px;
  font: 400 26px Roboto;
}


.input:focus {
  outline: none;
}
.input:focus ~ .label {
  top: 3px;
  font: 400 26px Roboto;
}
.input:focus ~ .bar:before {
  transform: translateX(0);
}
.bar {
  border-bottom: 2px solid #ff5126;
  width: 100%;
  margin-top: 6px;
  transition: .3s ease;
}
.input:valid ~ .bar
{
  border-bottom: 2px solid #3bb873;
}

<div class="centered-name">
    <div class="group">
        <input type="text" minlength="5" dir="rtl" class="input res" id="name" required autocomplete="off" />
        <label class="label res" for="name">Name</label>
        <div class="bar"></div>
    </div>
</div>

当受到侵害并且您写了一些东西（少于5个字母）并且它失去焦点时，标签就会掉下来

我也尝试

.input:invalid ~ .label 
{
  top: 3px;
  font: 400 26px Roboto;
}

.centered-name
{
  width: 80%;
  margin: auto;
}
.group {
  width: 100%;
  overflow: hidden;
  position: relative;
} 
.label {
  position: absolute;
  top: 40px;
  color: #666666;
  font: 400 26px Roboto;
  cursor: text;
  transition: 0.3s ease;
  width: 100%;
  text-align: center;
}

.input {
  display: block;
  width: 100%;
  padding-top: 36px;
  border: none;
  border-radius: 0;
  font-size: 30px;
  transition: .3s ease;
  text-align: center;
}
.input:valid ~ .label 
{
  top: 3px;
  font: 400 26px Roboto;
}
.input:invalid ~ .label 
{
  top: 3px;
  font: 400 26px Roboto;
}

.input:focus {
  outline: none;
}
.input:focus ~ .label {
  top: 3px;
  font: 400 26px Roboto;
}
.input:focus ~ .bar:before {
  transform: translateX(0);
}
.bar {
  border-bottom: 2px solid #ff5126;
  width: 100%;
  margin-top: 6px;
  transition: .3s ease;
}
.input:valid ~ .bar
{
  border-bottom: 2px solid #3bb873;
}

<div class="centered-name">
    <div class="group">
        <input type="text" minlength="5" dir="rtl" class="input res" id="name" required autocomplete="off" />
        <label class="label res" for="name">Name</label>
        <div class="bar"></div>
    </div>
</div>

但是在我们写任何东西之前，标签又会升起

写信后如何使输入无效？

Answer 1

您遇到的问题是因为您“滥用”有效的样式

您可以将其更改为使用：placeholder-shown https://caniuse.com/#feat=css-placeholder-shown

如果您在第一个示例中进行了更改

.input:focus ~ .label {
   top: 3px;
  font: 400 26px Roboto;
}

类似于

.input:not(:placeholder-shown) ~ .label {
    top: 3px;
    font: 400 26px Roboto;
}

.input::placeholder {
    color: transparent;
}

并在您输入的代码中添加一个占位符

Answer 2

尝试一下。.在js下面添加

$('#name').keyup( function() {
   if( this.value.length < 6 ) {
   $('input').blur();
   }
});

.centered-name 
{
  width: 80%;
  margin: auto;
}
.group {
  width: 100%;
  overflow: hidden;
  position: relative;
} 
.label {
  position: absolute;
  top: 40px;
  color: #666666;
  font: 400 26px Roboto;
  cursor: text;
  transition: 0.3s ease;
  width: 100%;
  text-align: center;
}

.input {
  display: block;
  width: 100%;
  padding-top: 36px;
  border: none;
  border-radius: 0;
  font-size: 30px;
  transition: .3s ease;
  text-align: center;
}
.input:valid ~ .label 
{
  top: 3px;
  font: 400 26px Roboto;
}


.input:focus {
  outline: none;
}
.input:focus ~ .label {
  top: 3px;
  font: 400 26px Roboto;
}
.input:focus ~ .bar:before {
  transform: translateX(0);
}
.bar {
  border-bottom: 2px solid #ff5126;
  width: 100%;
  margin-top: 6px;
  transition: .3s ease;
}
.input:valid ~ .bar
{
  border-bottom: 2px solid #3bb873;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="centered-name">
    <div class="group">
        <input type="text" minlength="5" dir="rtl" class="input res" id="name" required autocomplete="off" />
        <label class="label res" for="name">Name</label>
        <div class="bar"></div>
    </div>

</div>