跨浏览器实现placeholder效果的jQuery插件

2018-02-09 19:43:41来源:cnblogs.com作者:#城市之光人点击

分享

曾经遇到这样一个问题,处理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">' + 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

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台