您的位置：首页 > Web前端 > JQuery

看了两天jquery 插件的写法练手解决placeholder不兼容问题

2015-07-15 16:54 731 查看

看了两天的jquery插件如何编写，虽然是一知半解，但是自己迫不及待的想试试手，下面就是简单的处理placeholder在IE中不显示的兼容问题。供大家共同学习学习。。（jquery插件所以要使用的时候还需要先导入jquery库）。

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

<script>/*!
* placeholder v1.1
* 解决不支持placeholder属性的小小jquery小插件
* Copyright 2015 go-ahead
*/
(function($){
$.fn.placeholder=function(options){
//这里是默认值
var defaults={
tipsattr:"placeholder",
color1:"#999",
color2:"#000"
}
//默认值和传入的参数options合并
var opts=$.extend(defaults,options);
/*
* 	加上return我的理解是继续返回一个jquery对象，就是我当前操作的input.input-	tips 以便链式调用，例如下面的.height("30px")
*/
return this.each(function(){
$(this).val($(this).attr(opts.tipsattr)).css("color",opts.color1);
$(this).focus(function(){
$(this).css("color",opts.color2);
var thisVal=$(this).val()==$(this).attr(opts.tipsattr)?"":$(this).val();
$(this).val(thisVal);
});
$(this).blur(function(){
if($(this).val()==""){
$(this).val($(this).attr(opts.tipsattr)).css("color",opts.color1);
}
});
});
}
})(jQuery);

$(document).ready(function(){
$("input[type='text']").placeholder().height("30px");  //使用插件
});</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航