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



	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]"));  
		});  
 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值