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

龚鸿雪
2023-12-01


看了两天的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);
 类似资料: