jQuery IE 不支持占位符属性。有什么建议？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7765794/
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
Placeholder attribute not supported in IE. Any suggestions?
提问by Christian Fazzini
What do you all use to support placeholder attributes in browsers?
你们都用什么来支持浏览器中的占位符属性？
Currently, am using:
目前，我正在使用：
https://github.com/mathiasbynens/Placeholder-jQuery-Plugin
https://github.com/mathiasbynens/Placeholder-jQuery-Plugin
Have also tried this plugin to no avail:
也试过这个插件无济于事：
https://github.com/danbentley/placeholder
https://github.com/danbentley/placeholder
But it doesn't seem to work with IE... More specifically IE 8. Any other suggestions / alternatives?
但它似乎不适用于 IE ......更具体地说是 IE 8。还有其他建议/替代方案吗？
Should I forget about the placeholder attribute for now?
我现在应该忘记占位符属性吗？
采纳答案by Spudley
You're right that IE8 doesn't support the placeholderattribute. placeholderis part of the HTML5 spec, and IE8 was released a long time before HTML5 was thought of.
IE8 不支持该placeholder属性是对的。placeholder是 HTML5 规范的一部分，在人们想到 HTML5 之前，IE8 已经发布了很长时间。
The best way to deal with it in a seamless manner is to use a tool like Modernizrto detect whether the browser has support for the placeholder feature, and run a JS polyfill script if it isn't supported.
以无缝方式处理它的最佳方法是使用像Modernizr这样的工具来检测浏览器是否支持占位符功能，如果不支持，则运行 JS polyfill 脚本。
if(!Modernizr.input.placeholder) {
//insert placeholder polyfill script here.
}
There are numerous placeholder polyfill scripts out there to download. Pick one which makes use of the placeholderattribute so that you only need to define the placeholder string in one place for all browsers. Here's one you could try: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
有许多占位符 polyfill 脚本可供下载。选择一个使用该placeholder属性的方法，这样您只需为所有浏览器在一处定义占位符字符串。这是您可以尝试的一个：http: //www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
Hope that helps.
希望有帮助。
回答by Dylan Hayes
Here's code straight from my project that works natively in chrome and uses the polyfill in IE8... there's an alert in here for testing that shows when the polyfill is being called.
You need modernizr loaded as a prerequisite to using this code but a simple script include in your <head>section will do.
这是直接来自我的项目的代码，它在 chrome 中本地工作并在 IE8 中使用 polyfill ......这里有一个警报用于测试，显示何时调用 polyfill。您需要加载 Modernizr 作为使用此代码的先决条件，但在您的<head>部分中包含一个简单的脚本即可。
<script type="text/javascript">
$('document').ready(function () {
if (!Modernizr.input.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();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
alert("no place holders");
}
});
</script>
回答by neelsg
With all the other answers and examples I've been looking at, I found some problems. I wrote my own solution to resolve these issues and decided to post it here. The 2 things my code will handle correctly that the other solutions seem to have problems with are:
通过我一直在查看的所有其他答案和示例，我发现了一些问题。我编写了自己的解决方案来解决这些问题，并决定将其发布在这里。我的代码将正确处理其他解决方案似乎有问题的两件事是：
- If you actually happen to want to input the text contained in the placeholder as the value, my code won't assume that this is the placeholder and discard your input.
- If you press the refresh button in IE, it doesn't autopopulate the fields with the placeholder values.
- 如果您确实想输入占位符中包含的文本作为值，我的代码不会假定这是占位符并丢弃您的输入。
- 如果您在 IE 中按下刷新按钮，它不会使用占位符值自动填充字段。
Include Modernizr and JQuery as follows:
包括 Modernizr 和 JQuery，如下所示：
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="modernizr-2.6.2.js"></script>
Add some CSS such as:
添加一些 CSS，例如：
<style type="text/css" media="all">
.placeholder {
color: #aaa;
}
</style>
Then the main code you need is:
那么你需要的主要代码是：
<script type="text/javascript">
$(document).ready(function() {
// Only do anything if the browser does not support placeholders
if (!Modernizr.input.placeholder) {
// Format all elements with the placeholder attribute and insert it as a value
$('[placeholder]').each(function() {
if ($(this).val() == '') {
$(this).val($(this).attr('placeholder'));
$(this).addClass('placeholder');
}
$(this).focus(function() {
if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
$(this).val('');
$(this).removeClass('placeholder');
}
}).blur(function() {
if($(this).val() == '') {
$(this).val($(this).attr('placeholder'));
$(this).addClass('placeholder');
}
});
});
// Clean up any placeholders if the form gets submitted
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
$(this).val('');
}
});
});
// Clean up any placeholders if the page is refreshed
window.onbeforeunload = function() {
$('[placeholder]').each(function() {
if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
$(this).val('');
}
});
};
}
});
</script>
回答by tuomassalo
There are quite a few polyfill scripts for the placeholder attribute. Here's one that seems to work well.
placeholder 属性有很多 polyfill 脚本。这是一个似乎运行良好的方法。
Just remember to call $('input, textarea').placeholder();in your JS code, and possibly add a CSS rule, eg. .placeholder { color: #aaa }.
请记住调用$('input, textarea').placeholder();您的 JS 代码，并可能添加一个 CSS 规则，例如。.placeholder { color: #aaa }.
回答by weexpectedTHIS
In fact none of the IE's as of Oct 19th 2011 support the placeholder attribute. I've tested it in 7, 8, and 9 and none of them seem to recognize it. You'd think ie9, seeing as how it's supposed to support css3 and html5 would have fixed this but it does not appear so.
事实上，截至 2011 年 10 月 19 日，IE 都不支持占位符属性。我已经在 7、8 和 9 中对其进行了测试，但似乎没有人认出它。你会认为 ie9，看看它应该如何支持 css3 和 html5 会解决这个问题，但它没有出现。
As a simple workaround that isn't pretty but gets the job done you can use some javascript like this:
作为一个不漂亮但可以完成工作的简单解决方法，您可以使用一些这样的javascript：
<input type="text" value="Enter ZIP"
onfocus="if(this.value == 'Enter ZIP'){this.value = '';}" />
回答by Gerben
This is what I used in one of my projects. The only thing is that I only needed a placeholder on one element, so it might not work for your situation right away. But just to get the idea of how simple the code is:
这是我在我的一个项目中使用的。唯一的问题是我只需要一个元素上的占位符，因此它可能无法立即适用于您的情况。但只是为了了解代码有多简单：
(function(){
var nameInput = document.getElementById('your-id-here');
var placeHolderSupport = ("placeholder" in document.createElement("input"));
if( !placeHolderSupport )
{
//show hint in gray
var placeholder = nameInput.getAttribute('placeholder');
nameInput.onfocus = function(){ if(this.value==placeholder){this.value='';this.className='';} };
nameInput.onblur = function(){ if(this.value==''){this.value=placeholder;this.className='placeholder';} };
nameInput.onblur();
}
})()
