html - 如何使假占位符成为焦点

Question

Fiddle : 这是我的代码:

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

:focus{outline: none;}

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

.input1div input {
	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">
		
        <div class="input1div">
            <input class="firstname" type="text" name="firstname" placeholder="" />
						<span class="fakeplaceholder">First Name</span> 
					  <span class="focus-border"></span>
			  </div>
     
    </form>

</div>

如果你点击input框，那么.fakeplaceholder就会上去。

但我还想要更多:

预期结果:

1. 在焦点上，fakeplaceholder 会上升 ---- 工作
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 {
   	background-color:#ffffff;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	-ms-transform:translate(-50%,-50%);
	padding: 15px 120px 50px 50px;	
}

:focus{outline: none;}

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

.input1div input {
	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="" />
			<span class="fakeplaceholder">First Name</span> 
			<span class="focus-border"></span>
		</div>
    </form>
</div>