如何使假占位上去焦点

Question

Fiddle：这里是我的代码：

.accountbox { 
 
    \t background-color:#ffffff; 
 
\t position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
\t -ms-transform:translate(-50%,-50%); 
 
\t padding: 15px 120px 50px 50px; \t 
 
} 
 

 
:focus{outline: none;} 
 

 
.input1div { 
 
\t display:inline-block; position: relative; 
 
} 
 

 
.input1div input { 
 
\t font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px; 
 
} 
 

 
.input1div input {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;} 
 

 
.input1div input ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;} 
 
.input1div input:focus ~ .focus-border{width: 100%; transition: 0.4s;} 
 

 

 
.fakeplaceholder { 
 
    position: absolute; 
 
    pointer-events: none; 
 
    left: 20px; 
 
    top: 18px; 
 
    transition: 0.28s ease all; 
 
} 
 

 
.firstname:focus ~ .fakeplaceholder{ 
 
    top: -10px; 
 
    bottom: 10px; 
 
    left: 0px; 
 
    font-size: 11px; 
 
    opacity: 1; 
 
    color:red; 
 
}

<div class="accountbox"> 
 
    
 
    <form class="accountform"> 
 
\t \t 
 
     <div class="input1div"> 
 
      <input class="firstname" type="text" name="firstname" placeholder="" /> 
 
\t \t \t \t \t \t <span class="fakeplaceholder">First Name</span> 
 
\t \t \t \t \t <span class="focus-border"></span> 
 
\t \t \t </div> 
 
     
 
    </form> 
 

 
</div>

如果你点击input框，然后.fakeplaceholder就上去了。

但我想更多的东西：

预期结果：

1. 焦点，fakeplaceholder就上去了---- WORKING
2. 如果用户在其中键入一些文字，然后删除重点，它会熬夜 - 不工作

我试图使用这段代码，为了实现我想要的，但它不工作（测试它）

.firstname:not(:focus):valid ~ .fakeplaceholder{ 
    top: -10px; 
    bottom: 10px; 
    left: 0px; 
    font-size: 11px; 
    opacity: 1; 
    color:red; 
} 

Answer 1

var input = document.querySelector('.firstname'); 
 
var placeholder = document.querySelector('.fakeplaceholder'); 
 

 
input.addEventListener('change',function(){ 
 
    if(this.value == ''){ 
 
    placeholder.classList.remove('isValid'); 
 
    }else{ 
 
    placeholder.classList.add('isValid'); 
 
    } 
 
})

.accountbox { 
 
    \t background-color:#ffffff; 
 
\t position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
\t -ms-transform:translate(-50%,-50%); 
 
\t padding: 15px 120px 50px 50px; \t 
 
} 
 

 
:focus{outline: none;} 
 

 
.input1div { 
 
\t display:inline-block; position: relative; 
 
} 
 

 
.input1div input { 
 
\t font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px; 
 
} 
 

 
.input1div input {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;} 
 

 
.input1div input ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;} 
 
.input1div input:focus ~ .focus-border{width: 100%; transition: 0.4s;} 
 

 

 
.fakeplaceholder { 
 
    position: absolute; 
 
    pointer-events: none; 
 
    left: 20px; 
 
    top: 18px; 
 
    transition: 0.28s ease all; 
 
} 
 

 
.firstname:focus ~ .fakeplaceholder{ 
 
    top: -10px; 
 
    bottom: 10px; 
 
    left: 0px; 
 
    font-size: 11px; 
 
    opacity: 1; 
 
    color:red; 
 
} 
 

 
.isValid{ 
 
    top: -10px; 
 
    bottom: 10px; 
 
    left: 0px; 
 
    font-size: 11px; 
 
    opacity: 1; 
 
    color:red; 
 
}

<div class="accountbox"> 
 
    <form class="accountform"> 
 
     <div class="input1div"> 
 
      <input class="firstname" type="text" name="firstname" placeholder="" /> 
 
\t \t \t <span class="fakeplaceholder">First Name</span> 
 
\t \t \t <span class="focus-border"></span> 
 
\t \t </div> 
 
    </form> 
 
</div>