您的位置:首页 > Web前端 > HTML5

html4向上兼容html5输入框提示placeholder

2016-04-29 17:59 639 查看
var JHtml5Input = {  
   //检测  
   _check : function(){  
       //不支持html5 返回true  
       return !window.applicationCache;  
   },  
   //初始化  
   init : function(tipsClassName,css,inputs){  
       if(this._check()){  
           this.fix(tipsClassName,css,inputs);  
       }  
   },  
   //修复  
   fix : function(tipsClassName,css,inputs){  
       if(inputs == null || inputs.length == 0)  
           return;  
         
       for(var i = 0; i < inputs.length;i++){  
           var input = inputs.eq(i); 
           //添加placeholderId标志做唯一标志
           input.attr("placeholderId",new Date().getTime()+"x"+i);
           //获取input內补丁  
           var inputPadding = {  
                   left:input.css("padding-left"),  
                   right:input.css("padding-right"),  
                   bottom:input.css("padding-bottom"),  
                   top:input.css("padding-top")  
           };  
           //获取input外补丁  
           var inputMargin = {  
                   left:input.css("margin-left"),  
                   right:input.css("margin-right"),  
                   bottom:input.css("margin-bottom"),  
                   top:input.css("margin-top")  
           };
          //当是第一个输入框时父元素不用inline-block
          var isFirst = input.attr("placeholderId") == input.parent().children(":eq(0)").attr("placeholderId");
           
           //父元素
           var spanC = $("<span></span>");
           if(!isFirst){
           	spanC.css("display","inline-block");
           }
           input.before(spanC);
           
           //获取父容器  
           //强制输入框居左,否则当输入框没有宽度时候没法和输入框一直位置  ,向左浮动是为了兼容inline-block同时加个父元素
           var spanParentCss = {"display":"block","position":"relative", "width":"auto","text-align":"left","float":"left"};  
           var spanParent = null;  
           spanParent = $("<span></span>");  
           spanParent.css(spanParentCss);  
           
           spanC.append(spanParent);
           spanC.append($("<span style='clear: both;'></span>"));

           spanParent.append(input);
           
           //添加tips  
           var sipp_ = $("<pre></pre>");  
             
             
           //设置tips样式  
           var sippcss={  
                   "position":"absolute",  
                   "left":"0px",  
                   "top":"0px",  
                   "color":"#b2b2b2",
                   "height":input.height() == 0 ?"auto":input.height()+"px",  
                   "width":input.width() == 0 ?"auto":input.width()+"px",  
                   "margin-left":inputMargin.left,"margin-right":inputMargin.right,"margin-bottom":inputMargin.bottom,"margin-top":inputMargin.top,  
                   "padding-left":inputPadding.left,"padding-right":inputPadding.right,"padding-bottom":inputPadding.bottom,"padding-top":inputPadding.top  
           };
        
           if(parseInt(input.css("text-indent")) != 0){  
               sippcss["text-indent"] = input.css("text-indent");  
           }else if(parseInt(inputPadding.left) == 0 && parseInt(inputMargin.left) == 0){
           	sippcss["text-indent"] = input.css("font-size");  
           } 
           if(parseInt(input.css("line-height")) != 0){  
               sippcss["line-height"] = input.css("line-height");  
           }  
           if(parseInt(input.css("font-size")) != 0){  
               sippcss["font-size"] = input.css("font-size");  
           }  
           if(input.css("font-family") != ""){  
               sippcss["font-family"] = input.css("font-family");  
           }  
           sipp_.css(sippcss);  
           if(tipsClassName != null && tipsClassName != ""){  
               sipp_.addClass(tipsClassName);  
           }  
           if(css != null){  
               sipp_.css(css);  
           }  
           //设置提示信息  
           sipp_.text(input.attr("placeholder"));  
           //tpis加入文档  
           input.after(sipp_);  
             
           //设置对象引用  
           sipp_[0]["input"] = input;  
           input[0]["tips"] = sipp_;  
             
           //绑定事件  
           input.bind("keydown keyup focus blur",function(){  
               if($(this).val().length > 0){$(this["tips"]).hide();}else{$(this["tips"]).show();}  
           });  
           sipp_.click(function(){  
               $(this["input"]).focus();  
           });  
           //如果有数据则隐藏提示  
           if(input.val().length > 0){  
               sipp_.hide();  
           } 
           
       }  
   }  
};  
 
$(function(){  
   JHtml5Input.init(null,null,$('input[placeholder]'));  
   JHtml5Input.init(null,null,$("textarea[placeholder]"));  
});  


                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  html5 HTML jquery 兼容