html文本框中文字占位,html5 input placeholder文本占位符动画插件文本框文字提示输入...

特效描述：html5input placeholder 文本占位符动画插件 文本框文字提示输入。Placeholdem是文本域占位符符号标识的一个JavaScript插件。占位符的值将逐步删除焦点文字，并在焦点离开逐步恢复。

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

input,textarea {

border:2px solid #ddd;

border-radius:0;

color:#999;

display:block;

font:400 1em/1 "Open Sans",sans-serif;

margin:0 0 .5em;

padding:1em 1.25em;

width:100%;

-webkit-transition:border-color 300ms,color 300ms;

transition:border-color 300ms,color 300ms;

-webkit-appearance:none

}

input:focus,textarea:focus {

border-color:#333;

color:#333;

outline:0

}

textarea {

margin:0;

min-height:7.5em;

line-height:1.5;

overflow:auto;

resize:vertical

}

.arrow {

border-top:9px solid #ddd;

border-right:9px solid #ddd;

border-bottom:9px inset transparent;

border-left:9px inset transparent;

display:block;

position:absolute;

right:0;

top:0;

-webkit-transition:border-color 300ms;

transition:border-color 300ms

}

input:focus+.arrow,textarea:focus+.arrow {

border-top-color:#333;

border-right-color:#333

}

<!-- 添加占位符在input或textareas --/>

<input name="fieldname" placeholder="Placeholder Value" />

// 运行所有占位符元素

Placeholdem( document.querySelectorAll( '[placeholder]' ) );

Placeholdem(document.querySelectorAll('[placeholder]'));

var fadeElems = document.body.querySelectorAll('.fade'),

fadeElemsLength = fadeElems.length,

i = 0,

interval = 50;

function incFade(){

if(i < fadeElemsLength){

fadeElems[ i ].className += ' fade-load';

i++;

setTimeout(incFade, interval);

}

}

setTimeout( incFade, interval );