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'
    }
})();

演示：Fiddle

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;
  }
}

HTML5 / jQuery - 隐藏旧浏览器上的内容？

4 个答案: