曾经遇到这样一个问题，处理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
跨浏览器实现placeholder效果的jQuery插件
原文地址：https://www.cnblogs.com/city-light/p/8434597.html