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]")); });
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- HTML5中在客户端验证文件上传的大小
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- html5 web数据存储
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- HTML5调用摄像头实例
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证(升级版)
- Canvas 在高清屏下绘制图片变模糊的解决方法
- JavaScript 各种遍历方式详解
- 数组方法汇总