Question

我想使用HTML5的占位符属性（您可以在Thought Results的简报中看到它。但是当我使用旧版浏览器时，它们并没有呈现任何东西。我可以使用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。

如何使用具有向后兼容性的HTML5占位符属性？

3 个答案: