【前言】
在实践过程中发现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>