检查是不是支持占位符的简单方法？
Posted
技术标签:
【中文标题】检查是不是支持占位符的简单方法？【英文标题】：Simple way to check if placeholder is supported?检查是否支持占位符的简单方法？ 【发布时间】：2012-01-06 00:37:32 【问题描述】：如果用户的浏览器支持，我想在我的代码中使用html5"placeholder" 属性，否则只需在表单顶部打印字段名称。但我只想检查是否支持占位符，而不是用户正在使用的浏览器版本/名称。
所以理想情况下我想做类似的事情
<body>
<script>
if (placeholderIsNotSupported)
<b>Username</b>;
</script>
<input type = "text" placeholder ="Username">
</body>
除了我不确定 javascript 位。感谢您的帮助！
【问题讨论】：
【参考方案1】：function placeholderIsSupported()
var test = document.createElement('input');
return ('placeholder' in test);
我使用jQuery-ized version 作为起点。 （只是在应得的地方给予赞扬。）
【讨论】：
谢谢。会试试这个......返回（'测试中的占位符'）如何工作？你能给我一个标准参考吗？ 如果指定的属性在指定的对象中，in 关键字返回true。 developer.mozilla.org/en/JavaScript/Reference/Operators/in
@iMoses IE8 及更早版本对支持 hasOwnProperty 的位置有一定的限制。我怀疑在这种情况下使用 hasOwnProperty 可能会在 IE8 中中断。由于我们在这里进行功能检测，我猜支持旧版浏览器对发布问题的人很重要。
@iMoses 我刚刚启动了 IE8 虚拟机并进行了检查。 hasOwnProperty 在这种情况下在 IE8 上不受支持。它适用于许多对象，但不适用于document.createElement('input') 产生的对象。是的，浏览器怪癖！ :-|
在 IE9 上测试失败。 @Nikitta 的回答更好。【参考方案2】：
或者只是：
if (document.createElement("input").placeholder == undefined)
// Placeholder is not supported
【讨论】：
【参考方案3】：另一种无需在内存中创建必须进行 GC 处理的输入元素的方法：
if ('placeholder' in HTMLInputElement.prototype)
...
【讨论】：
GC 表示垃圾收集，所以这应该更快.. 从它的外观来看，还没有创建文档，似乎是更好的答案。 @algorithmicCoder 你能看看这个答案吗？我认为它更适合您以高性能方式尝试做的事情。 我得到 'HTMLInputElement' 在 IE7 中未定义 我使用了 HTMLInputElement.prototype.hasOwnProperty("placeholder") 代替，不确定占位符是否可以工作，如果它们是链的一部分，或者它会提高性能。【参考方案4】：如果您使用的是 Modernizr，请快速了解以下内容：
if(!Modernizr.input.placeholder)
...
【讨论】：
【参考方案5】：http://html5tutorial.info/html5-placeholder.php 有执行此操作的代码。
如果您已经在使用 jQuery，那么您实际上并不需要这样做。有可用的占位符插件 (http://plugins.jquery.com/plugin-tags/placeholder) 将在可能的情况下使用 HTML5 属性，如果不使用 Javascript 来模拟它。
【讨论】：
【参考方案6】：我正在尝试做同样的事情......我在这里写了这个
if(!('placeholder'in document.createElement("input")))
//... document.getElementById("element"). <-- rest of the code
有了这个，你应该有一个 id 来识别带有占位符的元素...... 我不知道这是否也有助于您仅在不支持占位符时识别元素。
【讨论】：
【参考方案7】：您好，这是一个老问题，但希望这对某人有所帮助。
此脚本将检查浏览器中占位符的兼容性，如果不兼容，它将使所有带有占位符的输入字段使用 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('');
)
);
【讨论】：
【参考方案8】：聚会有点晚了，但如果你使用 jQuery 或 AngularJS，你可以简化上面建议的方法，而无需使用任何插件。
jQuery
typeof $('<input>')[0].placeholder == 'string'
AngularJS
typeof angular.element('<input>')[0].placeholder == 'string'
检查非常相似，因为 AngularJS 在后台运行 jQlite。
【讨论】：
【参考方案9】：注意：占位符不能在 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 并显示标签。
【讨论】：
???仅仅因为 IE11 处理placeholder 与 Chrome 不同，并不意味着它不支持 placeholder。 IE11 确实支持placeholder。您提供的 3 个代码示例在 IE11 中正常工作。
在 Chrome 中，您可以使用不带标签的输入的小表单（因为在输入一些信息之前会显示占位符）。在 IE 中，一旦输入获得焦点，占位符就会被删除。在我的情况下，输入关注页面加载，所以 IE 是 sux。一如既往。
这并不意味着它已经坏了。一切正常；你只是不喜欢它的工作方式。您的回答是错误的，完全具有误导性。
你要打赌吗 - 我可以用相同的解释解释任何错误 - “它工作正常，你只是不喜欢它的工作方式”？
IE 占位符工作正常。你错了。案件结案。以上是关于检查是不是支持占位符的简单方法？的主要内容，如果未能解决你的问题，请参考以下文章