javascript - 占位符垫片 - 被媒体查询窃听

Question

下面的 javascript 是一个 HTML5 Placeholder shim。它创建一个标签来模仿不支持它的浏览器中的占位符属性。它在所有本身不支持 placeholder 的浏览器中运行得非常漂亮。

我注意到 FireFox 和 IE 中的这个错误 - 当 @media 查询激活时，错误的占位符被正确放置，但它不会隐藏在焦点上。

有人有什么想法吗？

(function($) {
  $.extend($,{ placeholder: {
      browser_supported: function() {
        return this._supported !== undefined ?
          this._supported :
          ( this._supported = !!('placeholder' in $('<input type="text">')[0]) );
      },
      shim: function(opts) {
        var config = {
          color: '#888',
          cls: 'placeholder',
          lr_padding:4,
          selector: 'input[placeholder], textarea[placeholder]'
        };
        $.extend(config,opts);
        !this.browser_supported() && $(config.selector)._placeholder_shim(config);
      }
  }});

  $.extend($.fn,{
    _placeholder_shim: function(config) {
      function calcPositionCss(target)
      {
        var op = $(target).offsetParent().offset();
        var ot = $(target).offset();

        return {
          top: ot.top - op.top + ($(target).outerHeight() - $(target).height()) /2,
          left: ot.left - op.left + config.lr_padding,
          width: $(target).width() - config.lr_padding
        };
      }
      return this.each(function() {
        var $this = $(this);

        if( $this.data('placeholder') ) {
          var $ol = $this.data('placeholder');
          $ol.css(calcPositionCss($this));
          return true;
        }

        var possible_line_height = {};
        if( !$this.is('textarea') && $this.css('height') != 'auto') {
          possible_line_height = { lineHeight: $this.css('height'), whiteSpace: 'nowrap' };
        }

        var ol = $('<label />')
          .text($this.attr('placeholder'))
          .addClass(config.cls)
          .css($.extend({
            position:'absolute',
            display: 'inline',
            float:'none',
            overflow:'hidden',
            textAlign: 'left',
            color: config.color,
            cursor: 'text',
            paddingTop: $this.css('padding-top'),
            paddingLeft: $this.css('padding-left'),
            fontSize: $this.css('font-size'),
            fontFamily: $this.css('font-family'),
            fontStyle: $this.css('font-style'),
            fontWeight: $this.css('font-weight'),
            textTransform: $this.css('text-transform'),
            zIndex: 99
          }, possible_line_height))
          .css(calcPositionCss(this))
          .attr('for', this.id)
          .data('target',$this)
          .click(function(){
            $this.data('target').focus()
          })
          .insertBefore(this);
        $this
          .data('placeholder',ol)
          .focus(function(){
            ol.hide();
          }).blur(function() {
            ol[$this.val().length ? 'hide' : 'show']();
          }).triggerHandler('blur');
        $(window)
          .resize(function() {
            var $target = ol.data('target')
            ol.css(calcPositionCss($target))
          });
      });
    }
  });
})(jQuery);

jQuery(document).add(window).bind('ready load', function() {
  if (jQuery.placeholder) {
    jQuery.placeholder.shim();
  }
});

Answer 1

我知道这不是真正的答案，但您是否尝试过其他插件？有一个 million different ones .

这个在过去对我来说非常有效:

https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

它使用与您展示的插件不同的方法。