如何使用 HTML5 占位符属性并考虑到向后兼容性？

Question

我想使用 HTML5 的占位符属性（您可以在 思考结果）。但是，当我使用旧版浏览器时，它们当然不会呈现任何内容。我可以使用 JavaScript 来模仿它，但是，我不应该使用它，它是用旧的方式完成的。我怎样才能拥有 HTML5 占位符属性，同时为旧版浏览器模拟它？

Answer 1

您可以检测浏览器是否支持该属性：

http://diveintohtml5.info/detect.html#input -placeholder

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

如果是，则不执行任何操作。如果没有，您可以使用 JS 获取占位符值，然后将其插入到您认为合适的字段中（可能作为默认值），然后添加适当的交互来模拟 HTML5 占位符行为。

Answer 2

@marcgg 编写了一个很棒的 JQuery 占位符插件，它基本上为那些不支持它的浏览器复制了占位符功能。

https://github.com/marcgg/Simple-Placeholder

我搜索了很多占位符在决定使用这个插件之前，我先安装了一些插件，到目前为止效果很好。最初发现它是为了回答类似的问题：

https://stackoverflow.com/questions/5120257/what-is-the-best-html5-placeholder-like-jquery-plugin-out-there

Answer 3

我建议使用 Modernizr 来检测此功能。

if (Modernizr.input.placeholder) {
  // your placeholder text should already be visible!
} else {
  // no placeholder support :(
  // fall back to a scripted solution
}

如果您对使用此库不感兴趣，可以使用以下代码。

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

关于后备支持，如果您使用 jQuery，您可以使用 Simple Placeholder，它有其起源于StackOverflow。