看了两天的jquery插件如何编写,虽然是一知半解,但是自己迫不及待的想试试手,下面就是简单的处理placeholder在IE中不显示的兼容问题。供大家共同学习学习。。(jquery插件所以要使用的时候还需要先导入jquery库)。
<input type="text" placeholder="请输入" value="你好"/>
/* placeholder v1 .1
* 解决不支持placeholder属性的小小jquery小插件
* Copyright 2015 go - ahead
*/
function isPlaceholder(){
var input = document.createElement('input');
if("placeholder" in input){
return true;
}else{
return false;
}
}
$(function(){
if(!isPlaceholder()){
$("input[placeholder]").placeholder(); //使用插件
}
});
(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() {
if ($(this).val() == ""||$(this).val() == $(this).attr(opts.tipsattr)) {
$(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);