HTML5 / jQuery - 隱藏舊瀏覽器上的內容？

Question

我的問題實際上恰恰相反，但你明白了。

我在“輸入”字段上方有一個帶占位符和標簽的表單。 它看起來有點愚蠢，但是由於舊瀏覽器不支持HTML5，其中添加了“placeholder”屬性，因此需要標簽。

我在想，如果有辦法檢查瀏覽器是否支持HTML5？ 如果是，請隱藏標簽。 如果沒有，隱藏占位符（你不需要它，因為瀏覽器無論如何都不會檢測占位符）。

<div class="6u">
Email
<input type="email" class="text" name="email" placeholder="Email" />
</div>

我想這可能與jQuery，但我真的很新。 這可能嗎？

Answer 1

您可以嘗試功能檢測

<div class="6u">
    <label>Email</label>
    <input type="email" class="text" name="email" placeholder="Email" />
</div>

然后

.placeholder label{
    display: none;
}

和

(function () {
    if ('placeholder' in document.createElement('input')) {
        var html = document.getElementsByTagName("html")[0];
        html.className = (html.className || '') + ' placeholder'
    }
})();

演示： 小提琴

Answer 2

如果要在輸入文本中添加id屬性

<div class="6u">
Email
<input id="email" type="email" class="text" name="email" placeholder="Email" />
</div>

並使用removeAttr（）函數

$("#email").removeAttr("placeholder");

Answer 3

我會做價值檢查，這里描述了diveintohtml5 。 然后，如果瀏覽器支持HTML5，則在body標簽中添加一個類以隱藏所有標簽。 讓瀏覽器完成工作，而不是JavaScript。

Answer 4

您可以檢查瀏覽器是否支持任何HTML5功能，如畫布或本地存儲，如下所示： - 請參閱http://diveintohtml5.info/detect.html

function supports_local_storage() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch(e){
    return false;
  }
}