HTML5「佔位符」支持

Question

如何查看瀏覽器是否支持HTML5佔位符標記，以便我可以決定是否掛住我的jQuery佔位符插件。

Answer 1

var placeholderSupported = ('placeholder' in document.createElement('input')); 

變量placeholderSupported將true如果原生支持它。否則，它將被設置爲false。

Answer 2

要得到廣泛的思路去：

http://caniuse.com/#search=placeholder

並在瀏覽器來測試你可以這樣做：

function supportsPlaceholder() { 
    var i = document.createElement('input'); 
    return 'placeholder' in i; 
} 

Answer 3

如果要包括第三方庫像Modernizr的和yepnope .js，測試支持和漸進式增強非常簡單，並且適度降級。

這是有很多資源的，應該幫助一個很好的文章：http://www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/

Answer 4

http://diveinto.html5doctor.com/everything.html#placeholder

return 'placeholder' in document.createElement('input'); 

但是，你正在使用的jQuery插件可能已經檢查本機支持 - 你可能不是需要你自己做。

Answer 5

我從上面的答案借用並提出，以便它是與舊的現代瀏覽器以及IE向後兼容 -

有了下面的代碼，請確保您同時有「價值」和「佔位符'爲輸入字段設置屬性。在我的特殊情況下，我需要支持IE變體。

說明 - 如果瀏覽器支持佔位符，則會刪除輸入值。如果不是，則舊版瀏覽器將忽略佔位符屬性，而下面的js模仿默認的佔位符行爲。該腳本還將忽略CSRF的任何身份驗證令牌（在我的表單中導致auth令牌值在我的Rails應用中導致CSRF警告時出現錯誤）。

簡化腳本本身的另一種方法是爲每個輸入分配一個類，以明確地使用此腳本並相應地更新true語句（儘管下面的方法更乾燥一些）。

var placeholderSupported = !!('placeholder' in document.createElement('input')); 

if (placeholderSupported === true){ 
    $('input:not([type="submit"], [name="authenticity_token"])').val(''); 
} else{ 
    $('input') 
     .focus(function() { 
      if (this.value === this.defaultValue) { 
       this.value = ''; 
      } 
     }) 
     .blur(function() { 
      if (this.value === '') { 
       this.value = this.defaultValue; 
      } 
    }); 
}