如何在 Firefox 和其他不支持 html5 标签选项的浏览器中获取占位符文本？

Question

这适用于 Chrome 和任何其他支持 HTML5 中占位符文本的浏览器，

<input id="name" name="name"  type="text" placeholder="Please enter your name..." required /> <br />

但是，它不适用于 3.5 及更早版本的 Firefox，显然还有 IE8，可能还有其他浏览器。

我如何实现同样的目标（最好是在 HTML/CSS 中 - 如果不是，我愿意接受建议），以支持所有旧版浏览器？如果不是每个浏览器，至少是 Firefox 和 IE。

Safari 和 Chrome 已经支持它（或者最新版本）。

谢谢。

Answer 1

有一天我会抽出时间来正确记录这一点，但请参阅以下示例： http: //dorward.me.uk/tmp/label-work/example.html

简而言之 - 将 放置在透明 下> 使用

提供背景颜色和边框。

然后用JS根据焦点来判断标签是否可见。

当 JS 无法将标签放置在元素旁边时，应用不同的样式。

与使用值不同，这不会导致仅显示焦点内容的设备（例如屏幕阅读器）无法访问内容，并且也适用于密码类型的输入。

Answer 2

我用这个：https://github.com/danbentley/placeholder
轻量且简单的 jQuery 插件。

Answer 3

这是我发现在任何地方都适用的最简单的解决方案：

<input id="search" 
   name="search" 
   onblur="if (this.value == '') {this.value = 'PLACEHOLDER';}" 
   onfocus="if (this.value == 'PLACEHOLDER') {this.value = '';}"
/>

将 PLACEHOLDER 替换为您自己的。

目前，FF3 尚不支持“input”元素的“placeholder”属性。 FF4、Opera11和Chrome8部分支持它，即它们在字段中渲染占位符文本，但当用户聚焦在字段中时不删除它，这比根本不支持更糟糕。

Answer 4

我使用用 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);
        }
    });
});

我假设您希望继续使用 HTML5 浏览器的占位符属性，在这种情况下，您必须进行一些浏览器检测，并且仅将 jQuery 解决方案应用于不支持它的浏览器。

更好的是，您可以使用 Modernizer 库，如本答案所述。
通过 jQuery 检测对特定 HTML 5 功能的支持< /a>

Answer 5

这是一个 MooTools 插件，它将占位符带到尚不支持它的浏览器：

http://mootools .net/forge/p/form_placeholder

Answer 6

我用这个： https://github.com/Jayphen/placeholder
这个轻量且简单的 jQuery 插件是 danbentley/placeholder 的一个分支。

优点：它为临时填充的输入字段添加了一个“占位符”类。
CSS“.placeholder {color:silver}”使填充文本看起来像占位符，而不是常规输入文本。

缺点：它不会填充密码字段的占位符。

Answer 7

顺便说一句...如果有人感兴趣...我发现了一个很好的优雅的解决方案，它是一个非常棒的 jQuery 插件。

它实际上是一行 jQuery，一个缩小的 js 插件，以及输入上的一个简单的类名。

http://labs.thesedays.com/projects/jquery/clearfield/ 我发现的最美丽的东西，仅次于 html 中的“Placeholder”。

Answer 8

诀窍是使用 javascript 函数 onBlur() 和 onFocus()。

以下是对我有用的代码：

<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 （即：“您的电子邮件”）和 SUBSCRIPTION_LINK （即：EN mailchimp 嵌入代码中“action”标记的值...）是用于本地化的 PHP 常量。

Answer 9

对于 Firefox 中的“占位符”工作，只需添加属性

::-moz-占位符

CSS 标签中的

Answer 10

对我有用，将你的 CSS 更改为

::-webkit-input-placeholder {
  color: #999;
}