HTML5/jQuery - 在旧浏览器上隐藏内容？答案

【问题标题】：HTML5/jQuery - Hide content on old browsers?HTML5/jQuery - 在旧浏览器上隐藏内容？
【发布时间】：2013-12-30 11:48:27
【问题描述】：

我的问题实际上是相反的，但你明白了。

我在“输入”字段上方有一个带有占位符和标签的表单。它看起来有点愚蠢，但由于旧浏览器不支持 HTML5，其中添加了“占位符”属性，因此需要标签。

我在想，如果有办法检查浏览器是否支持 HTML5？如果是，请隐藏标签。如果没有，请隐藏占位符（你不需要，因为浏览器无论如何都不会检测到占位符）。

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

我猜想使用 jQuery 是可能的，但我对它真的很陌生。这可能吗？

【问题讨论】：

stackoverflow.com/questions/15020826/…
您可以使用Modernizr 来检测浏览器是否支持HTML5，并相应地使用jquery 来隐藏/显示标签

标签： javascript jquery css html

【解决方案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'
    }
})();

演示：Fiddle

【讨论】：

【解决方案2】：

如果你想在输入文本中添加 id 属性

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

并使用 removeAttr() 函数

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

【讨论】：

【解决方案3】：

我会进行值检查，此处描述为diveintohtml5。然后，如果浏览器支持 HTML5，则在 body 标签中添加一个类来隐藏所有标签。让浏览器完成工作，而不是您的 JavaScript。

【讨论】：

【解决方案4】：

您可以检查浏览器是否支持任何 HTML5 功能，例如画布或本地存储，如下所示：- 请参阅 http://diveintohtml5.info/detect.html

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

【讨论】：