如何在考虑向后兼容性的情况下使用HTML5占位符属性

how to use HTML5 placeholder attribute with backward-compatibility in mind?

本文关键字：情况下 HTML5 属性 占位符 兼容性      更新时间：2023-09-26

我想使用HTML5的占位符属性(您可以在Thought Results的时事通讯中看到它(。但是，当我使用旧的浏览器时，它们当然不会呈现任何内容。我可以使用JavaScript来模仿它，但我不应该使用它，而且它是按照旧的方式完成的。如何既有HTML5占位符属性，又能为旧浏览器模拟它？

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

http://diveintohtml5.info/detect.html#input-占位符

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

如果是，什么也不做。如果没有，您可以使用JS获取占位符值，然后将其插入到您认为合适的字段中(可能是默认值(，然后添加适当的交互来模拟HTML5占位符行为。

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

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

在选择这个插件之前，我搜索了很多占位符插件，到目前为止效果很好。最初发现它是为了回应这个类似的问题：

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

我建议使用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。

相关文章：