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

Posted 2023-03-05

【中文标题】HTML5/jQuery - 在旧浏览器上隐藏内容？

【英文标题】：HTML5/jQuery - Hide content on old browsers?

【发布时间】：2013-12-30 11:48:27

【问题描述】：

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

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

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

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

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

【问题讨论】：

***.com/questions/15020826/…

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

【参考方案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;