jQuery EnPlaceholder plug (兼容IE浏览器的placeholder)使用
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2015年9月8日 14:24:47 星期二
http://fanshuyao.iteye.com/
enplaceholder是一个比较好的placeholder插件,可以在不支持placeholder的浏览器中显示提示,如果浏览器本身支持,就不会使用本插件。
插件来源:http://www.ifrans.cn/jquery-enplaceholder-plug/
插件demo:http://www.ifrans.cn/demo/enplaceholder.html
插件有2仲模式,个人喜欢通过插入元素模拟这种
//通过value模拟placeholder
$(
'input'
).placeholder();
//通过插入元素模拟placeholder
$(
'input'
).placeholder({isUseSpan:
true
});
文本框内容改变时placeholder消失:
$('#username2,#password').placeholder({isUseSpan:true});
获得焦点时placeholder消失:
$('#address2').placeholder({isUseSpan:true,onInput:false});
但插件还有一个问题,就是input不使用placeholder时会返回undefined,但本人已经修改问题,增加了如下代码:
//修正无placeholder时,显示undefined问题 if(defaultValue != null && typeof(defaultValue) != "undefined")
该插件属于Jquery插件,依赖Jquery
插件见附件,或下面的源代码。
源代码:
/** * jQuery EnPlaceholder plug * EnPlaceholder是一个跨浏览器实现placeholder效果的jQuery插件 * version 1.0 * by Frans.Lee <dmon@foxmail.com> http://www.ifrans.cn * * 修正无placeholder显示undefined问题(lqy--http://fanshuyao.iteye.com/) * var defaultValue = $(_this).attr('placeholder'); * if(defaultValue != null && typeof(defaultValue) != "undefined"){ * * } */ ;(function ($) { $.fn.extend({ "placeholder":function (options) { options = $.extend({ placeholderColor:'#ACA899', isUseSpan:false, //是否使用插入span标签模拟placeholder的方式,默认false,默认使用value模拟 onInput:true //使用标签模拟(isUseSpan为true)时,是否绑定onInput事件取代focus/blur事件 }, options); $(this).each(function () { var _this = this; var supportPlaceholder = 'placeholder' in document.createElement('input'); if (!supportPlaceholder) { var defaultValue = $(_this).attr('placeholder'); //修正无placeholder时,显示undefined问题 if(defaultValue != null && typeof(defaultValue) != "undefined"){ var defaultColor = $(_this).css('color'); if (options.isUseSpan == false) { $(_this).focus(function () { var pattern = new RegExp("^" + defaultValue + "$|^$"); pattern.test($(_this).val()) && $(_this).val('').css('color', defaultColor); }).blur(function () { if ($(_this).val() == defaultValue) { $(_this).css('color', defaultColor); } else if ($(_this).val().length == 0) { $(_this).val(defaultValue).css('color', options.placeholderColor) } }).trigger('blur'); } else { var $imitate = $('<span class="wrap-placeholder" style="position:absolute; display:inline-block; overflow:hidden; color:'+options.placeholderColor+'; width:'+$(_this).outerWidth()+'px; height:'+$(_this).outerHeight()+'px;">' + defaultValue + '</span>'); $imitate.css({ 'margin-left':$(_this).css('margin-left'), 'margin-top':$(_this).css('margin-top'), 'font-size':$(_this).css('font-size'), 'font-family':$(_this).css('font-family'), 'font-weight':$(_this).css('font-weight'), 'padding-left':parseInt($(_this).css('padding-left')) + 2 + 'px', 'line-height':_this.nodeName.toLowerCase() == 'textarea' ? $(_this).css('line-weight') : $(_this).outerHeight() + 'px', 'padding-top':_this.nodeName.toLowerCase() == 'textarea' ? parseInt($(_this).css('padding-top')) + 2 : 0 }); $(_this).before($imitate.click(function () { $(_this).trigger('focus'); })); $(_this).val().length != 0 && $imitate.hide(); if (options.onInput) { //绑定oninput/onpropertychange事件 var inputChangeEvent = typeof(_this.oninput) == 'object' ? 'input' : 'propertychange'; $(_this).bind(inputChangeEvent, function () { $imitate[0].style.display = $(_this).val().length != 0 ? 'none' : 'inline-block'; }); } else { $(_this).focus(function () { $imitate.hide(); }).blur(function () { /^$/.test($(_this).val()) && $imitate.show(); }); } } } } }); return this; } }); })(jQuery);
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2015年9月8日 14:24:47 星期二
http://fanshuyao.iteye.com/
相关推荐
现在流行html5了都,所有的浏览器都支持placeholder,唯独IE不支持,那么这插件将完美解决IE浏览器不兼容input标签的placeholder属性.
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
主要介绍了两种方法基于jQuery实现IE浏览器兼容placeholder效果,需要的朋友可以参考下
复制代码代码如下: //placeholder功能实现 var placeholder = { add: function (el) { if (!(‘placeholder’ in document.createElement(‘input’))) { var self = placeholder; el.each(functio
有好多的提示文字直接写在了input框中,placeholder属性只在高版本的谷歌和火狐中有但是不兼容ie8以下,此附件为input框中出现提示文字(兼容ie 火狐 谷歌)。
JS placeholder插件兼容IE6+浏览器 火狐 谷歌浏览器等
则可以在谷歌浏览器等高级浏览器的输入框中实现替换文本的功能,也就是得到如下图所示的对话框: 但是这个属性在WIN7默认的浏览器IE8中无法兼容,更不要说IE6了。也就是说IE里面不支持placeholder这个标签。 不信的...
许多网站在input输入框内都有默认提示字体,html5新增了这一项功能,placeholder,但是不兼容ie浏览器,这个组件可以让你实现兼容ie浏览器
51、如何禁止火狐浏览器的右键功能 327 52、IE地址栏前换成自己的图标 327 53、关闭输入法 327 54、网页禁止保存复制代码大全 327 55、禁止打印页面 330 57、JS动态插入元素到BODY的第一个位置 332 58、JS正则表达式...