【Foreword】
In practice, it is found that the effect of jquery.placeholder.js on placeholder support is not particularly ideal, and the value of the placeholder attribute disappears from time to time, so it is recommended to use the native JS solution.
【Code】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> demo measurement </ 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'),
//Whether the browser input field supports 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>