佔位符填充 - 與媒體查詢綁定

下面的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

佔位符填充 - 與媒體查詢綁定

回答

相關問題