首页 > 代码库 > 让ie支持placeholder
让ie支持placeholder
在项目中，input 和 textarea标签要用到提示，当初是用value来模拟的，虽然可以达到这个效果，但是每一个还绑定了onblur和onfocus事件，这样一来 提交数据的时候验证就是个麻烦事了，input text还好一些，失去焦点是就可以用defaultvalue来搞，textarea就麻烦了，没有defaultvalue这个属性。
没有defaultvalue都是小事，我们项目用到了jquery.validationEngine验证框架，如果用框架来验证的话，那么就不能用value来模拟提示了，所以 干脆就找一个网上的placeholder插件来实现提示，搞到项目中，可以了，运行一看，虽然可以用，但是还是达不到我们想要的效果（兼容效果：只要一获得焦点，提示就消失），Firefox默认是onInput才消失，我就想改改那个插件的代码，尼玛，看不懂啊，Google... 看到了一篇关于开发jQuery插件的博文，受益匪浅啊，在此推荐给还不会的童鞋，地址是：http://javascript.ruanyifeng.com/jquery/plugin.html，这篇博文虽然短小，但是精悍啊，做到了授人以鱼不如授人以渔，通俗易懂，非常感谢。
前面的大多是屁话，不过那篇博文看看还是对我们这些小菜鸟开发jQuery插件还是很有用的，不多说了，ie支持的placeholder插件代码如下：
/** * 兼容placeholder,如果判断是没有能力实现placeholder的浏览器，则默认用span标签来模拟提示 * 用法：在标签上写上placeholder属性，如果标签是textarea的话，那么就需要在写一个属性maxwidth（提示最短长度） * 作者：cjw * 时间：2014年9月27日15:44:38 * */;$(function ($){ $.fn.placeholder = function (optons){ var settings = $.extend({ placeholderColorToOther:"#444", // Firefox 提示文字颜色 placeholderColorToIe:"#9a9a9a", // ie 提示文字颜色 onInputHide:false // 采用支持placeholder浏览器的placeholder效果，单开始输入的时候，才隐藏提示，默认为false },optons); return this.each(function (i,obj){ var isCan = "placeholder" in document.createElement("input"); if (isCan){ // 可以 // 一加载的颜色 if ($(obj).val() == ""){ $(obj).css("color",settings.placeholderColorToOther); }else { $(obj).css("color","#000"); // 黑色 } if (!settings.onInputHide){ var tempPlaceholder = ""; $(obj).focus(function (){ tempPlaceholder = $(obj).attr("placeholder"); $(this).css("color","#000").attr("placeholder",""); }).blur(function (){ if ($(obj).val() == ""){ $(this).css("color",settings.placeholderColorToOther).attr("placeholder",tempPlaceholder); } }); } }else { // 不可以 则用模拟span来实现 setSpan(obj); } }); // 模拟span标签 function setSpan(obj){ var placeholderStr = $(obj).attr("placeholder"); // span 标签的样式及参数 var textAlign = $(obj).css("text-align"); var display = "inline-block"; if ($(obj).val() != ""){ display = "none"; } var width = $(obj).width(); if (obj.tagName == "TEXTAREA"){ width = $(obj).attr("maxwidth"); } var height = $(obj)[0].tagName == "TEXTAREA" ? $(obj).css("line-weight") : $(obj).outerHeight(); var tempSpan = $(‘<span class="wrap-placeholder" style="position:absolute;text-align:‘+textAlign+‘;display:‘+display+‘; overflow:hidden;color:‘+settings.placeholderColorToIe+‘;width:‘+width+‘px; height:‘+height+‘px;">‘+placeholderStr+‘</span>‘); tempSpan.css({ "margin-left":$(obj).css("margin-left"), "margin-top":$(obj).css("margin-top"), "font-size":$(obj).css("font-size"), "font-family":$(obj).css("font-family"), "font-weight":$(obj).css("font-weight"), "padding-left":parseInt($(obj).css("padding-left")) + 2 + "px", "line-height":$(obj)[0].tagName == "TEXTAREA" ? $(obj).css("line-weight") : $(obj).outerHeight() + "px", "padding-top":$(obj)[0].tagName == "TEXTAREA" ? parseInt($(obj).css("padding-top")) + 2 : 0, "min-width":$(obj).css("min-width") }); $(obj).before(tempSpan.click(function (){ // 判断是否执行相应的操作，如果obj是不可用的，则不执行 if ($(obj).is(":enabled")){ $(obj).trigger("focus"); } })); if (settings.onInputHide){ $(obj).on("input",function (){ tempSpan.hide(); }).blur(function (){ if ($(obj).val() == ""){ tempSpan.show(); } }); }else { $(obj).focus(function (){ tempSpan.hide(); }).blur(function (){ if ($(obj).val() == ""){ tempSpan.show(); } }); } } } }(jQuery));// 启用placeholder$(function (){ $("[placeholder]").placeholder(); });代码很简单，如何不会jQuery插件开发的，理解起来还是有点吃力的，当我第一次看到这种写法的时候，参数不是很理解
让ie支持placeholder
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。