如果用户的浏览器支持，我想在我的代码中使用HTML5"placeholder" 属性，否则只需在表单顶部打印字段名称。但我只想检查是否支持占位符，而不是用户正在使用的浏览器版本/名称。
所以理想情况下我想做类似的事情
<body>
<script>
if (placeholderIsNotSupported) {
<b>Username</b>;
}
</script>
<input type = "text" placeholder ="Username">
</body>
除了我不确定 javascript 位。感谢您的帮助！
【问题讨论】：
标签： javascript html placeholder
function placeholderIsSupported() {
var test = document.createElement('input');
return ('placeholder' in test);
}
我使用jQuery-ized version 作为起点。 （只是在应得的地方给予赞扬。）
【讨论】：
in 关键字返回true。 developer.mozilla.org/en/JavaScript/Reference/Operators/in
hasOwnProperty 的位置有一定的限制。我怀疑在这种情况下使用 hasOwnProperty 可能会在 IE8 中中断。由于我们在这里进行功能检测，我猜支持旧版浏览器对发布问题的人很重要。
hasOwnProperty 在这种情况下在 IE8 上不受支持。它适用于许多对象，但不适用于document.createElement('input') 产生的对象。是的，浏览器怪癖！ :-|
或者只是：
if (document.createElement("input").placeholder == undefined) {
// Placeholder is not supported
}
【讨论】：
另一种无需在内存中创建必须进行 GC 处理的输入元素的方法：
if ('placeholder' in HTMLInputElement.prototype) {
...
}
【讨论】：
如果您使用的是 Modernizr，请快速了解以下内容：
if(!Modernizr.input.placeholder){
...
}
【讨论】：
http://html5tutorial.info/html5-placeholder.php 有执行此操作的代码。
如果您已经在使用 jQuery，那么您实际上并不需要这样做。有可用的占位符插件 (http://plugins.jquery.com/plugin-tags/placeholder) 将在可能的情况下使用 HTML5 属性，如果不使用 Javascript 来模拟它。
【讨论】：
我正在尝试做同样的事情......我在这里写了这个
if(!('placeholder'in document.createElement("input"))){
//... document.getElementById("element"). <-- rest of the code
}}
有了这个，你应该有一个 id 来识别带有占位符的元素...... 我不知道这是否也有助于您仅在不支持占位符时识别元素。
【讨论】：
您好，这是一个老问题，但希望这对某人有所帮助。
此脚本将检查浏览器中占位符的兼容性，如果不兼容，它将使所有带有占位符的输入字段使用 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('');
}
})
});
}
【讨论】：
聚会有点晚了，但如果你使用 jQuery 或 AngularJS，你可以简化上面建议的方法，而无需使用任何插件。
jQuery
typeof $('<input>')[0].placeholder == 'string'
AngularJS
typeof angular.element('<input>')[0].placeholder == 'string'
检查非常相似，因为 AngularJS 在后台运行 jQlite。
【讨论】：
注意：占位符不能在 Internet Explorer 中以某种方式工作，它应该可以工作。
document.createElement("input").placeholder == undefined
在 Internet Explorer 11 中不起作用 - document.createElement("input").placeholder 返回空字符串
var testInput = document.createElement('input');
testPlaceholderCompatibility = ('placeholder' in testInput);
在 Internet Explorer 11 中不起作用 - 返回 true
'placeholder'in document.createElement("input")
在 Internet Explorer 11 中不起作用 - 返回 true
理论上，Internet explorer 11 应该支持占位符，但实际上——当输入获取焦点时占位符消失了。在 Chrome 中显示占位符，直到您实际输入内容，无论焦点如何。 因此，在这种情况下，特征检测不起作用 - 您需要检测 IE 并显示标签。
【讨论】：
placeholder 与 Chrome 不同，并不意味着它不支持 placeholder。 IE11 确实支持placeholder。您提供的 3 个代码示例在 IE11 中正常工作。