Javascript 检查占位符是否受支持的简单方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8263891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple way to check if placeholder is supported?
提问by algorithmicCoder
I want to use the HTML5"placeholder"attribute in my code if the user's browser supports it otherwise just print the field name on top of the form. But I only want to check whether placeholder is supported and not what version/name of browser the user is using.
HTML5"placeholder"如果用户的浏览器支持，我想在我的代码中使用该属性，否则只需在表单顶部打印字段名称。但我只想检查是否支持占位符，而不是用户使用的浏览器版本/名称。
So Ideally i would want to do something like
所以理想情况下我想做类似的事情
<body>
<script>
if (placeholderIsNotSupported) {
<b>Username</b>;
}
</script>
<input type = "text" placeholder ="Username">
</body>
Except Im not sure of the javascript bit. Help is appreciated!
除了我不确定 javascript 位。帮助表示赞赏！
回答by Trott
function placeholderIsSupported() {
var test = document.createElement('input');
return ('placeholder' in test);
}
I used a jQuery-ized versionas a starting point. (Just giving credit where it's due.)
我使用jQuery 化版本作为起点。（只是在到期时给予信用。）
回答by Nikita Gavrilov
Or just:
要不就：
if (document.createElement("input").placeholder == undefined) {
// Placeholder is not supported
}
回答by beenhero
If you are using Modernizr, quick catch following:
如果您使用的是 Modernizr，请快速了解以下内容：
if(!Modernizr.input.placeholder){
...
}
回答by probablyup
Another way without making an input element in memory that has to be GC'd:
无需在内存中创建必须被 GC 处理的输入元素的另一种方法：
if ('placeholder' in HTMLInputElement.prototype) {
...
}
回答by mikel
http://html5tutorial.info/html5-placeholder.phphas the code to do it.
http://html5tutorial.info/html5-placeholder.php有代码可以做到这一点。
If you're already using jQuery, you don't really need to do this though. There are placeholder plugins available ( http://plugins.jquery.com/plugin-tags/placeholder) that will use the HTML5 attribute where possible, and Javascript to simulate it if not.
如果您已经在使用 jQuery，那么您实际上并不需要这样做。有可用的占位符插件 ( http://plugins.jquery.com/plugin-tags/placeholder) 将在可能的情况下使用 HTML5 属性，如果没有，则使用 Javascript 来模拟它。
回答by Andrea Tamago
I'm trying to do the same... here i wrote this
我正在尝试做同样的事情......我在这里写了这个
if(!('placeholder'in document.createElement("input"))){
//... document.getElementById("element"). <-- rest of the code
}}
With this you should have an id to identify the element with the placeholder... I don't know thought if this also help you to identify the element ONLY when the placeholder isn't supported.
有了这个，你应该有一个 id 来识别带有占位符的元素......我不知道这是否也有助于你在不支持占位符时识别元素。
回答by Josh
Hi there this is an old question but hopefully this helps someone.
嗨，这是一个老问题，但希望这对某人有所帮助。
This script will check the compatibility of placeholders in your browser, and if its not compatible it will make all input fields with a placeholder use the value="" field instead. Note when the form is submitted it will also change your input back to "" if nothing was entered.
此脚本将检查浏览器中占位符的兼容性，如果不兼容，它将使所有带有占位符的输入字段都使用 value="" 字段。请注意，提交表单时，如果未输入任何内容，它也会将您的输入更改回“”。
// Add support for placeholders in all browsers
var testInput = document.createElement('input');
testPlaceholderCompatibility = ('placeholder' in testInput);
if (testPlaceholderCompatibility === false)
{
$('[placeholder]').load(function(){
var input = $(this);
if (input.val() == '')
{
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
});
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
回答by Boaz - Reinstate Monica
A bit late to the party, but if you're using jQuery or AngularJS you can simplify the method suggested above without using any plugins.
参加聚会有点晚了，但是如果您使用 jQuery 或 AngularJS，您可以简化上面建议的方法，而无需使用任何插件。
jQuery
jQuery
typeof $('<input>')[0].placeholder == 'string'
AngularJS
AngularJS
typeof angular.element('<input>')[0].placeholder == 'string'
The checks are very similar, as AngularJS runs jQliteunder the hood.
回答by Andrew Zhilin
NOTE: Placeholder DO NOT work in internet explorer in a way, it should work.
注意：占位符不能在 Internet Explorer 中以某种方式工作，它应该可以工作。
document.createElement("input").placeholder == undefined
Doesnt work in internet explorer 11 - document.createElement("input").placeholder return empty string
在 Internet Explorer 11 中不起作用 - document.createElement("input").placeholder 返回空字符串
var testInput = document.createElement('input');
testPlaceholderCompatibility = ('placeholder' in testInput);
Doesnt work in internet explorer 11 - return true
在 Internet Explorer 11 中不起作用 - 返回 true
'placeholder'in document.createElement("input")
Doesnt work in internet explorer 11 - return true
在 Internet Explorer 11 中不起作用 - 返回 true
In theory, Internet explorer 11 is supposed to support placeholder, but in fact - when input get focus placeholder disappear. In Chrome placeholder showed until you actually type something, no matter on focus. So, feature detection doesnt work in this case - you need to detect IE and show Labels.
理论上，Internet Explorer 11 应该支持占位符，但实际上——当输入获得焦点时占位符就消失了。在 Chrome 中显示占位符，直到您实际键入内容为止，无论是否聚焦。因此，在这种情况下，特征检测不起作用 - 您需要检测 IE 并显示标签。
