跨浏览器实现placeholder效果的jQuery插件
程序员文章站
2022-06-22 12:39:50
曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性。几经周折,这个方案是可以解决问题的。 1、jsp页面引入js插件 2、页面初始化代码 3、页面标签代码 4、插件placeholder.js 5、GAME OVER ......
曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性。几经周折,这个方案是可以解决问题的。
1、jsp页面引入js插件
<script type="text/javascript" src="<%=basePath%>/login.js" ></script>
2、页面初始化代码
<script type="text/javascript"> //input提示信息 效果插件 针对ie8处理 $(function() { if(!('placeholder' in document.createElement('input'))){ $('#password').placeholder({isUseSpan:true}); } }); </script>
3、页面标签代码
<input id="password" name="j_password" class="input_text input_open" placeholder="请输入密码" type="password" >
4、插件placeholder.js
/** * jQuery EnPlaceholder plug * 跨浏览器实现placeholder效果的jQuery插件 * version 1.0 * } */ // // var defaultValue = "账号"; (function ($) { $.fn.extend({ "placeholder":function (options) { options = $.extend({ placeholderColor:'#BABABA', //#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; left:85px; 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);
5、GAME OVER
上一篇: 基本的文件操作
下一篇: jQuery应用实例4:下拉列表
推荐阅读
-
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
-
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
-
jQuery插件zTree实现的多选树效果示例
-
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
-
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
-
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
-
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
-
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
-
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】