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/