Html IE9 HTML5 占位符 - 人们是如何实现这一点的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11303739/
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
IE9 HTML5 placeholder - how are people achieving this?
提问by Adam Levitt
I'm trying to use the placeholder="xxx"attribute in my web application, and I don't want to have a special visual for IE9. Can people throw out some good suggestions for achieving this functionality in IE9?
我正在尝试placeholder="xxx"在我的 Web 应用程序中使用该属性，并且我不想为 IE9 提供特殊的视觉效果。人们能否提出一些在 IE9 中实现此功能的好建议？
I've found a couple links on here but none of the suggested scripts were sufficient... and the answers were from mid-2011, so I figured maybe there is a better solution out there. Perhaps with a widely-adopted jQuery plugin? I do not want to use anything that requires intrusive code such as requiring a certain css class or something.
我在这里找到了几个链接，但建议的脚本都不够用……答案是 2011 年年中的，所以我想可能有更好的解决方案。也许使用广泛采用的 jQuery 插件？我不想使用任何需要侵入性代码的东西，例如需要某个 css 类或其他东西。
Thanks.
谢谢。
EDIT- I also need this to work for password input fields.
编辑- 我也需要这个来处理密码输入字段。
// the below snippet should work, but isn't.
$(document).ready(function() {
initPlaceholders()();
}
function initPlaceholders() {
$.support.placeholder = false;
var test = document.createElement('input');
if ('placeholder' in test) {
$.support.placeholder = true;
return function() { }
} else {
return function() {
$(function() {
var active = document.activeElement;
$('form').delegate(':text, :password', 'focus', function() {
var _placeholder = $(this).attr('placeholder'),
_val = $(this).val();
if (_placeholder != '' && _val == _placeholder) {
$(this).val('').removeClass('hasPlaceholder');
}
}).delegate(':text, :password', 'blur', function() {
var _placeholder = $(this).attr('placeholder'),
_val = $(this).val();
if (_placeholder != '' && (_val == '' || _val == _placeholder)) {
$(this).val(_placeholder).addClass('hasPlaceholder');
}
}).submit(function() {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
$(':text, :password').blur();
$(active).focus();
});
}
}
}
回答by Matthew Flaschen
We just researched the same thing. We decided on reusing this gist, by Aaron McCall, after making some minor changes. The main advantage is that it's simple, easy to understand code:
我们只是研究了同样的事情。在进行了一些小改动后，我们决定重用Aaron McCall 的这个要点。主要优点是代码简单易懂：
Remove the kernel and setup_placeholders parts. Just call it immediately in an anonymous function.
Add
varbeforetest.
删除 kernel 和 setup_placeholders 部分。只需在匿名函数中立即调用它。
var之前添加test。
For browsers that support placeholder, it simply falls back to that. It also handles new input elements (note the use of delegate) in existing forms. But does not handle dynamic new form elements. It could probably be modified to do so with jQuery.on.
对于支持 的浏览器placeholder，它只是回退到那个。它还处理delegate现有表单中的新输入元素（注意 的使用）。但不处理动态的新表单元素。它可能可以修改为这样做jQuery.on。
If you don't like this one, you can use one of the ones here. However, some of them are overcomplicated, or have questionable design decisions like setTimeoutfor detecting new elements.
如果你不喜欢这个，你可以在这里使用其中之一。但是，其中一些过于复杂，或者具有可疑的设计决策，例如setTimeout检测新元素。
Note that it needs to use two pairs of parens, since you're calling an anonymous function, then calling the returned function (this could be factored out differently):
请注意，它需要使用两对括号，因为您正在调用匿名函数，然后调用返回的函数（这可以以不同的方式分解）：
(function () {
// ...
})()();
回答by corymathews
I wrote a jquery plugin a while back that adds the placeholder support to any browser that does not support it and does nothing in those that do.
不久前我写了一个 jquery 插件，它将占位符支持添加到任何不支持它的浏览器，并且在那些支持它的浏览器中什么也不做。
回答by powerbuoy
Here's a jQuery plugin that works with password fields as well. It's not as tiny as the code suggested by Matthew but it has a few more fixes in it. I've used this successfully together with H5Validate as well.
这是一个也适用于密码字段的 jQuery 插件。它不像 Matthew 建议的代码那么小，但它还有一些修复。我也成功地将它与 H5Validate 一起使用。
