解决IE下输入框不支持placeholder属性

最新推荐文章于 2019-08-16 22:22:32 发布

qq_21700537

最新推荐文章于 2019-08-16 22:22:32 发布

阅读量334

点赞数 1

分类专栏： js,jq

js,jq 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<meta charset="utf-8"/>
<title>解决IE下不支持placeholder属性</title>
<script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
.text{width: 200px;padding: 10px;}
</style>
<script type="text/javascript">
;(function($){
$.fn.placeholder = function(options){
var opts = $.extend({}, $.fn.placeholder.defaults, options);
var isIE = document.all ? true : false;
return this.each(function(){
var _this = this,
placeholderValue =_this.getAttribute("placeholder"); //缓存默认的placeholder值
if(isIE){
_this.setAttribute("value",placeholderValue);
_this.onfocus = function(){
$.trim(_this.value) == placeholderValue ? _this.value = "" : '';
};
_this.onblur = function(){
$.trim(_this.value) == "" ? _this.value = placeholderValue : '';
};
}
});
};
})(jQuery);
</script>
</head>

<body>
<input placeholder="请输入用密码" type="password" class="text"/>
<input placeholder="请输入用户名" type="text" class="text" />

<script type="text/javascript">
$("input").placeholder();
</script>

</body>
</html>