Html 如何在不支持 html5 标签选项的 Firefox 和其他浏览器中获取占位符文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3429520/
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
How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?
提问by marcamillion
This works in Chrome and any other browser that supports placeholder text in HTML5
这适用于 Chrome 和任何其他支持 HTML5 中的占位符文本的浏览器
<input id="name" name="name" type="text" placeholder="Please enter your name..." required /> <br />
But, it doesn't work in 3.5 and earlier of Firefox, and obviously IE8, and possibly other browsers.
但是，它不适用于 Firefox 3.5 及更早版本，显然不适用于 IE8，也可能不适用于其他浏览器。
How do I achieve the same thing (preferably in HTML/CSS - if not I am open to suggestions), to support all the older browsers? If not every single browser, at least Firefox and IE.
我如何实现同样的事情（最好在 HTML/CSS 中 - 如果不是我愿意接受建议），以支持所有旧浏览器？如果不是每个浏览器，至少是 Firefox 和 IE。
Safari and Chrome already support it (or the latest versions anyway).
Safari 和 Chrome 已经支持它（或最新版本）。
Thanks.
谢谢。
采纳答案by marcamillion
By the way...if anyone is interested...I found a nice elegant solution that is a jQuery plugin that is SOOO nice.
顺便说一句......如果有人感兴趣......我找到了一个很好的优雅解决方案，它是一个非常好的jQuery插件。
It literally is one line of jQuery, a minified js plugin, along with a simple class name on the input.
它实际上是一行 jQuery，一个缩小的 js 插件，以及一个简单的输入类名。
http://labs.thesedays.com/projects/jquery/clearfield/
http://labs.thesedays.com/projects/jquery/clearfield/
It's the most beautiful thing I have discovered, next to 'Placeholder' in html.
这是我发现的最美丽的东西，在 html 中的“占位符”旁边。
回答by Quentin
One day I'll get around to properly documenting this, but see this example: http://dorward.me.uk/tmp/label-work/example.html
有一天我会开始正确记录这一点，但请参阅此示例：http: //dorward.me.uk/tmp/label-work/example.html
In short — position a <label>under a transparent <input>using <div>to provide background colour and borders.
总之-位置的<label>下一个透明<input>使用<div>，以提供背景色和边框。
Then use JS to determine if the label should be visible or not based on focusing.
然后使用JS根据焦点判断标签是否应该可见。
Apply different styles when JS is not available to position the label beside the element instead.
当 JS 无法将标签放置在元素旁边时，应用不同的样式。
Unlike using the value, this doesn't render the content inaccessible to devices which only display the focused content (e.g. screen readers), and also works for inputs of the passwordtype.
与使用 不同value，这不会使仅显示焦点内容的设备（例如屏幕阅读器）无法访问内容，并且也适用于该password类型的输入。
回答by Florian
I use this one: https://github.com/danbentley/placeholder
Lightweight and simple jQuery plugin.
我使用这个：https: //github.com/danbentley/placeholder
轻量级和简单的 jQuery 插件。
回答by Marios Zindilis
Here is the simplest solution that I found working everywhere:
这是我发现在任何地方都可以使用的最简单的解决方案：
<input id="search"
name="search"
onblur="if (this.value == '') {this.value = 'PLACEHOLDER';}"
onfocus="if (this.value == 'PLACEHOLDER') {this.value = '';}"
/>
Replace PLACEHOLDER with your own.
将 PLACEHOLDER 替换为您自己的。
At the moment, FF3 does not yet support the "placeholder" attribute of the "input" element. FF4, Opera11 and Chrome8 support it partially, i.e. they render the placeholder text in the field, but do not delete it when the user focuses in the field, which is worse that not supporting it at all.
目前，FF3 还不支持“input”元素的“placeholder”属性。FF4、Opera11和Chrome8部分支持，即在字段中渲染占位符文本，但在用户聚焦字段时不会删除它，更糟糕的是根本不支持它。
回答by Matt
Here is a MooTools Plugin, that brings the placeholder to browsers that don't support it yet:
这是一个 MooTools 插件，它将占位符带到尚不支持它的浏览器：
回答by Marko
I use the following snippet that I wrote with jQuery. Just add a class of textbox-auto-clear to any textbox on the page and you should be good to go.
我使用我用 jQuery 编写的以下代码段。只需向页面上的任何文本框添加一类 textbox-auto-clear ，就可以了。
<input type="text" value="Please enter your name" class="textbox-auto-clear" />
$(".textbox-auto-clear").each(function(){
var origValue = $(this).val(); // Store the original value
$(this).focus(function(){
if($(this).val() == origValue) {
$(this).val('');
}
});
$(this).blur(function(){
if($(this).val() == '') {
$(this).val(origValue);
}
});
});
I assume that you want to keep using the placeholder attribute for HTML5 browsers, in which case you'd have to do some browser detection and only apply the jQuery solution to browsers that don't support it.
我假设您想继续为 HTML5 浏览器使用 placeholder 属性，在这种情况下，您必须进行一些浏览器检测，并且只将 jQuery 解决方案应用于不支持它的浏览器。
Better yet, you can us the Modernizerlibrary, as outlined in this answer. Detecting support for specific HTML 5 features via jQuery
更好的是，您可以使用Modernizer库，如本答案所述。 通过 jQuery 检测对特定 HTML 5 功能的支持
回答by Pro Backup
I use this one: https://github.com/Jayphen/placeholderThis lightweight and simple jQuery plugin is a fork of danbentley/placeholder.
我使用这个：https: //github.com/Jayphen/placeholder这个轻量级且简单的 jQuery 插件是 danbentley/placeholder 的一个分支。
Advantage: it adds a class "placeholder" to input fields that are temporarily filled. Css ".placeholder {color:silver}" make the polyfill text look like a placeholder instead of regular input text.
优点：它为临时填充的输入字段添加了一个类“占位符”。Css ".placeholder {color:silver}" 使 polyfill 文本看起来像一个占位符而不是常规输入文本。
Disadvantage: It doesn't polyfill the placeholder of a password field.
缺点：它不会填充密码字段的占位符。
回答by Gilbou
The trick is to use javascript functions onBlur() and onFocus().
诀窍是使用 javascript 函数 onBlur() 和 onFocus()。
Here is the code that worked for me:
这是对我有用的代码：
<script language="javascript" type="text/javascript" >
var hint_color = "grey", field_color = null;
var hinted = true;
function hint() { // set the default text
document.getElementById('mce-EMAIL').style.color = hint_color;
document.getElementById('mce-EMAIL').value = "<?php echo SUBSCRIPTION_HINT; ?>";
hinted = true;
}
function hintIfEmpty() { // set the default text, only if the field is empty
if (document.getElementById('mce-EMAIL').value == '') hint();
}
function removeHint() {
if (hinted) {
document.getElementById('mce-EMAIL').style.color = field_color;
document.getElementById('mce-EMAIL').value = "";
hinted = false;
}
}
function send() {
document.getElementById('subscription_form').submit();
hint();
}
</script>
<div style="position:absolute; display: block; top:10; left:10; ">
<form id="subscription_form" action="<?php echo SUBSCRIPTION_LINK; ?>" method="post" target="_blank">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" style="width: 122px;" onBlur="hintIfEmpty();" onFocus="removeHint();" required>
<a href="javascript:send()"><font style="position: relative; top:-1px;"><b>ok</b></font></a>
</form>
</div>
<script language="javascript" type="text/javascript" >
field_color = document.getElementById('mce-EMAIL').style.color;
hint();
</script>
SUBSCRIPTION_HINT (i.e.: "your e-mail" ) and SUBSCRIPTION_LINK (i.e.: the value of the 'action' tag in your EN mailchimp embed code...) are PHP constants used for localization.
SUBSCRIPTION_HINT（即：“您的电子邮件”）和 SUBSCRIPTION_LINK（即：EN mailchimp 嵌入代码中“action”标签的值...）是用于本地化的 PHP 常量。
回答by Nicholas
For "placeholder" work in Firefox just add the attribute
对于Firefox 中的“占位符”工作，只需添加属性
::-moz-placeholder
::-moz-占位符
in CSS tags.
在 CSS 标签中。
回答by Tamilselvan K
Works for me, change your CSS to
对我有用，将您的 CSS 更改为
::-webkit-input-placeholder {
color: #999;
}
