IE下支持文本框和密码框placeholder效果的JQuery插件分享

前端之家收集整理的这篇文章主要介绍了IE下支持文本框和密码框placeholder效果的JQuery插件分享前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

很久之前写了这个插件,基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框。

placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失。

下载地址:

实现代码如下:

代码如下:

var placeholderfriend = { focus: function(s) { s = $(s).hide().prev().show().focus(); var idValue = s.attr("id"); if (idValue) { s.attr("id",idValue.replace("placeholderfriend","")); } var clsValue = s.attr("class"); if (clsValue) { s.attr("class",clsValue.replace("placeholderfriend","")); } } }

//判断是否支持placeholder function isPlaceholer() { var input = document.createElement('input'); return "placeholder" in input; } //不支持代码 if (!isPlaceholer()) { $(function() {

var form = $(this);

//遍历所有文本框,添加placeholder模拟事件 var elements = form.find("input[type='text'][placeholder]"); elements.each(function() { var s = $(this); var pValue = s.attr("placeholder"); var sValue = s.val(); if (pValue) { if (sValue == '') { s.val(pValue); } } });

elements.focus(function() { var s = $(this); var pValue = s.attr("placeholder"); var sValue = s.val(); if (sValue && pValue) { if (sValue == pValue) { s.val(''); } } });

elements.blur(function() { var s = $(this); var pValue = s.attr("placeholder"); var sValue = s.val(); if (!sValue) { s.val(pValue); } });

//遍历所有密码框,添加placeholder模拟事件 var elementsPass = form.find("input[type='password'][placeholder]"); elementsPass.each(function(i) { var s = $(this); var pValue = s.attr("placeholder"); var sValue = s.val(); if (pValue) { if (sValue == '') { //DOM不支持type的修改,需要复制密码框属性生成新的DOM var html = this.outerHTML || ""; html = html.replace(/\s*type=(['"])?password\1/gi," type=text placeholderfriend") .replace(/\s*(?:value|on[a-z]+|name)(=(['"])?\S*\1)?/gi," ") .replace(/\s*placeholderfriend/," placeholderfriend value='" + pValue + "' " + "onfocus='placeholderfriendfocus(this);' "); var idValue = s.attr("id"); if (idValue) { s.attr("id",idValue + "placeholderfriend"); } var clsValue = s.attr("class"); if (clsValue) { s.attr("class",clsValue + "placeholderfriend"); } s.hide(); s.after(html); } } });

elementsPass.blur(function() { var s = $(this); var sValue = s.val(); if (sValue == '') { var idValue = s.attr("id"); if (idValue) { s.attr("id",idValue + "placeholderfriend"); } var clsValue = s.attr("class"); if (clsValue) { s.attr("class",clsValue + "placeholderfriend"); } s.hide().next().show(); } });

}); } window.placeholderfriendfocus = placeholderfriend.focus; })(jQuery);

使用很简单,例子如下:

代码如下:

原文链接:https://www.f2er.com/jquery/55976.html

猜你在找的jQuery相关文章