欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

解决IE不支持placeholder的问题

程序员文章站 2022-05-22 14:34:02
...

【前言】

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

 

相关标签： CSS 浏览器兼容 学生提问

上一篇： 解析中常见错误

下一篇： Java之XML解析的两种方法介绍

推荐阅读