【前言】
在实践过程中发现jquery.placeholder.js对placeholder支持的效果不是特别理想，placeholder属性值时而会消失，所以建议采用原生JS方案。
【代码】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo测试</title>
<style type="text/css">
*{margin: 0;padding: 0}
</style>
</head>
<body>
<input type="text" name="username" placeholder="请输入名字">
<script type="text/javascript">
placeholder();
function placeholder() {
var doc=document,
inputs=doc.getElementsByTagName('input'),
//浏览器input域是否支持placeholder
supportPlaceholder='placeholder'in doc.createElement('input'),
placeholder=function(input){
var text=input.getAttribute('placeholder'),
defaultValue=input.defaultValue;
if(defaultValue==''){
input.value=text
}
input.onfocus=function(){
if(input.value===text){
this.value=''
}
};
input.onblur=function(){
if(input.value===''){
this.value=text
}
}
};
if(!supportPlaceholder){
for(var i=0,len=inputs.length;i<len;i++){
var input=inputs[i],
text=input.getAttribute('placeholder');
if(input.type==='text'&&text){
placeholder(input)
}
}
}
}
</script>
</body>
</html>