占位符填充 - 与媒体查询绑定

下面的javascript是一个HTML5占位符垫片。它会创建一个标签来模拟不支持它的浏览器中的占位符属性。它在所有非本地支持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(); 
    } 
});

来源

2011-09-20 Ben

与其解决该问题，https://github.com/scottjehl/Respond是规范的媒体查询填充。 –

尽管如此（Wouter van de Graaf的css3-mediaqueries.js也是如此），但这并不能解决问题。 – Ben

我知道这是不是一个真正的答案，但你尝试了不同的插件？有一个million different ones。

这其中有完美的工作对我来说过去：

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

它采用了不同的方法还有你的插件。

来源

2011-09-20 11:26:22 thirtydot

我还没有尝试过很多其他的插件替换占位符，但我会循环直到找到一个，我想。你提供的插件被打破了（我想）当前安装的其他插件之一。马蒂亚斯的插件是否适合你 - 占位符插件在媒体查询已经在浏览器中生效，占位符不是本地的情况下，占位符插件是否仍然有效） – Ben

占位符填充 - 与媒体查询绑定

回答

相关问题