创建浮动式标签模式

学习：http://www.csdn.net/article/2014-04-15/2819310-how-to-create-the-float-label-pattern

 

html 

<form action="">
	<div class="input">
		<input type="text" id="name">
		<label for="name">Your name</label>
	</div>
	<div class="input">
		<input type="text" id="address">
		<label for="address">Address</label>
	</div>
</form>

　　

Css

form{
	margin:5em;
	backface-visibility:hidden;
}
.input{
	 position:relative;
         float:left;
	 margin:10px;
}
input{
	border:1px solid #eee;
	padding:1em .5em;
	outline:none;
}
input + label{ 
	position:absolute;
	left:10px;
	top:50%;
	transform:translateY(-50%);
	color:#aaa;
	transition:all .2s ease;
}
input:focus + label,
	.not-empty + label{
	color:#52A5FB;
	font-size:.65em;
	top:8%;
	transform:none;
}
.not-empty + label{
	color:#aaa;
}    

　　

Js

<script>
    var inputs = document.getElementsByTagName('input'); 

    for( i=0 ; i<inputs.length; i++ ) {
        var input = inputs[i];
        input.addEventListener('keyup',bindUI, false);
    } 

    function bindUI() {
          if( this.value ) {
              this.classList.add('not-empty');
          } else {
              this.classList.remove('not-empty');
          }
    }
</script>