HTML5“占位符”支持

Question

如何確定瀏覽器是否支持HTML5占位符標記，以便我可以決定是否掛鈎我的jQuery占位符插件。

Answer 1

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

如果本機支持，變量placeholderSupported將為true 。 否則，它將被設置為false 。

Answer 2

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

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

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

Answer 3

如果你想包括像Modernizr和yepnope.js這樣的第三方庫，那么測試支持並逐步增強，優雅地降級是非常容易的。

這是一篇很好的文章，有很多資源可以提供幫助： http ： //www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/

Answer 4

要獲得一個廣泛的想法，請訪問：

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

要在瀏覽器中測試，您可以執行以下操作：

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

Answer 5

我借鑒了上面的答案，並使其向后兼容舊的現代瀏覽器以及IE -

使用以下代碼，確保為輸入字段設置了“值”和“占位符”屬性。 在我的特定情況下，我需要支持IE變種。

說明 - 如果瀏覽器支持占位符，則刪除輸入值。 如果沒有，舊的瀏覽器將忽略占位符屬性，下面的js模仿默認的占位符行為。 此腳本還將忽略CSRF的任何auth令牌（在我的表單中獲取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;
            }
    });
}