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

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

在解决这个问题之前,我搜索了很多占位符插件,到目前为止效果很好.最初发现它是为了回应这个类似的问题:

/sf/ask/358418021/