blocks|key|1177228|text|我发现了一个很好的优雅的解决方案，那就是一个非常好的jQuery插件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1177229|它的字面意思是一行jQuery，一个简化的js插件，以及输入上的一个简单的类名。|1177230|http://labs.thesedays.com/projects/jquery/clearfield/|offset|length|1177231|这是我发现的最漂亮的东西，仅次于html中的“占位符”。|1177232|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1H|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@$F|T|G|U|1|V]]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|E]]]]

<p>By the way...if anyone is interested...I found a nice elegant solution that is a jQuery plugin that is SOOO nice.</p>

<p>It literally is one line of jQuery, a minified js plugin, along with a simple class name on the input.</p>

<p><a href="http://labs.thesedays.com/projects/jquery/clearfield/" rel="nofollow noreferrer">http://labs.thesedays.com/projects/jquery/clearfield/</a></p>

<p>It's the most beautiful thing I have discovered, next to 'Placeholder' in html.</p>


blocks|key|1177172|text|总有一天我会对此进行适当的记录，但请看这个示例：http://dorward.me.uk/tmp/label-work/example.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1177173|简而言之，将<label>放置在透明的<input>下，使用<div>提供背景颜色和边框。|style|CODE|1177174|然后使用JS根据聚焦来确定标签是否可见。|1177175|当JS不可用时，应用不同的样式来将标签放在元素旁边。|1177176|与使用value不同，这不会使只显示焦点内容的设备(例如屏幕阅读器)无法访问内容，而且还可以用于password类型的输入。|1177177|entityMap|0|LINK|mutability|MUTABLE|url|http://dorward.me.uk/tmp/label-work/example.html^0|O|1C|0|0|6|7|J|7|U|5|0|0|0|3|5|1C|8|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@$A|10|B|11|F|G]|$A|12|B|13|F|G]|$A|14|B|15|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|16|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|17|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|18|8|@$A|19|B|1A|F|G]|$A|1B|B|1C|F|G]]|9|@]|C|$]]|$1|N|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

<p>One day I'll get around to properly documenting this, but see this example: <a href="http://dorward.me.uk/tmp/label-work/example.html" rel="noreferrer">http://dorward.me.uk/tmp/label-work/example.html</a></p>

<p>In short — position a <code>&lt;label&gt;</code> under a transparent <code>&lt;input&gt;</code> using <code>&lt;div&gt;</code> to provide background colour and borders.</p>

<p>Then use JS to determine if the label should be visible or not based on focusing.</p>

<p>Apply different styles when JS is not available to position the label beside the element instead.</p>

<p>Unlike using the <code>value</code>, 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 <code>password</code> type.</p>


blocks|key|1177381|text|我使用这个：https://github.com/danbentley/placeholder|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1177382|轻量级简单的jQuery插件。|1177383|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/danbentley/placeholder^0|6|15|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p>I use this one: <a href="https://github.com/danbentley/placeholder" rel="noreferrer">https://github.com/danbentley/placeholder</a><br>
Lightweight and simple jQuery plugin.</p>


blocks|key|963117|text|这是我发现的最简单的解决方案，在任何地方都可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|963118|<input+id="search"+
+++name="search"+
+++onblur="if+(this.value+==+'')+{this.value+=+'PLACEHOLDER';}"+
+++onfocus="if+(this.value+==+'PLACEHOLDER')+{this.value+=+'';}"
/>|code-block|syntax|javascript|963119|使用您自己的占位符替换占位符。|963120|目前，FF3还不支持"input“元素的"placeholder”属性。Opera11和Chrome8部分支持它，即它们在字段中呈现占位符文本，但当用户将焦点放在字段中时不删除它，这比根本不支持它更糟糕。|963121|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Here is the simplest solution that I found working everywhere:</p>

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

<p>Replace PLACEHOLDER with your own. </p>

<p>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.</p>


blocks|key|1177107|text|我使用我用jQuery编写的以下代码片段。只需添加一类textbox+-自动清除页面上的任何文本框，您就可以开始工作了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1177108|<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);
++++++++}
++++});
});|code-block|syntax|javascript|1177109|我假设您希望继续对HTML5浏览器使用占位符属性，在这种情况下，您必须执行一些浏览器检测，并且只将jQuery解决方案应用于不支持它的浏览器。|1177110|更好的是，您可以使用Modernizer库，如本答案中所述。Detecting+support+for+specific+HTML+5+features+via+jQuery|offset|length|1177111|entityMap|0|LINK|mutability|MUTABLE|url|http://www.modernizr.com/|1|https://stackoverflow.com/questions/1657170/detecting-support-for-specific-html-5-features-via-jquery/1657182#1657182^0|0|0|0|A|A|0|U|1L|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]|$K|13|L|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>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.</p>

<pre><code>&lt;input type="text" value="Please enter your name" class="textbox-auto-clear" /&gt;

$(".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);
        }
    });
});
</code></pre>

<p>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.</p>

<p>Better yet, you can us the <a href="http://www.modernizr.com/" rel="nofollow noreferrer">Modernizer</a> library, as outlined in this answer.
<a href="https://stackoverflow.com/questions/1657170/detecting-support-for-specific-html-5-features-via-jquery/1657182#1657182">Detecting support for specific HTML 5 features via jQuery</a></p>


blocks|key|1177290|text|这是一个MooTools插件，它将占位符带给还不支持它的浏览器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1177291|http://mootools.net/forge/p/form_placeholder|offset|length|1177292|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|18|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

<p>Here is a MooTools Plugin, that brings the placeholder to browsers that don't support it yet:</p>

<p><a href="http://mootools.net/forge/p/form_placeholder" rel="nofollow">http://mootools.net/forge/p/form_placeholder</a></p>


blocks|key|1177434|text|我使用这个插件：https://github.com/Jayphen/placeholder，这个轻量级简单的jQuery插件是danbentley/占位符的分支。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1177435|优点:它为临时填充的输入字段添加了一个类“占位符”。Css+".placeholder+{.placeholder:silver}“使多色填充文本看起来像一个占位符，而不是常规的输入文本。|1177436|缺点:它不会多重填充密码字段的占位符。|1177437|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/Jayphen/placeholder^0|8|12|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

<p>I use this one: <a href="https://github.com/Jayphen/placeholder" rel="nofollow">https://github.com/Jayphen/placeholder</a>
This lightweight and simple jQuery plugin is a fork of danbentley/placeholder.</p>

<p>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.</p>

<p>Disadvantage: It doesn't polyfill the placeholder of a password field.</p>


blocks|key|1177498|text|诀窍是使用javascript函数onBlur()和onFocus()。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1177499|以下是为我工作的代码：|1177500|<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>|code-block|syntax|javascript|1177501|SUBSCRIPTION_HINT+(即：“您的电子邮件”)和SUBSCRIPTION_LINK+(即:+EN+mailchimp嵌入代码中'action‘标记的值...)是用于本地化的PHP常量。|1177502|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>The trick is to use javascript functions onBlur() and onFocus(). </p>

<p>Here is the code that worked for me:</p>

<pre><code>&lt;script language="javascript" type="text/javascript" &gt;

    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 = "&lt;?php echo SUBSCRIPTION_HINT; ?&gt;";

        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();

    }

&lt;/script&gt;

&lt;div style="position:absolute; display: block; top:10; left:10; "&gt;
&lt;form id="subscription_form" action="&lt;?php echo SUBSCRIPTION_LINK; ?&gt;" method="post" target="_blank"&gt;

    &lt;input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" style="width: 122px;" onBlur="hintIfEmpty();" onFocus="removeHint();" required&gt;
    &lt;a href="javascript:send()"&gt;&lt;font style="position: relative; top:-1px;"&gt;&lt;b&gt;ok&lt;/b&gt;&lt;/font&gt;&lt;/a&gt;

&lt;/form&gt;
&lt;/div&gt;

&lt;script language="javascript" type="text/javascript" &gt;

    field_color = document.getElementById('mce-EMAIL').style.color;
    hint();

&lt;/script&gt;
</code></pre>

<p>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.</p>


blocks|key|1177519|text|适用于我，将您的CSS更改为|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1177520|::-webkit-input-placeholder+{
++color:+#999;
}|code-block|syntax|javascript|1177521|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Works for me, change your CSS to</p>

<pre><code>::-webkit-input-placeholder {
  color: #999;
}
</code></pre>


<p>This works in Chrome and any other browser that supports placeholder text in HTML5</p>

<pre><code>&lt;input id="name" name="name"  type="text" placeholder="Please enter your name..." required /&gt; &lt;br /&gt;
</code></pre>

<p>But, it doesn't work in 3.5 and earlier of Firefox, and obviously IE8, and possibly other browsers.</p>

<p>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.</p>

<p>Safari and Chrome already support it (or the latest versions anyway).</p>

<p>Thanks.</p>


How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?

jQuery

HTML5

这适用于Chrome和任何其他支持HTML5中的占位符文本的浏览器<input id="name" name="name"  type="text" placeholder="Please enter your name..." required /> <br />但是，它不能在火狐的3.5和更早的版本中工作，显然还有IE8，可能还有其他浏览器。我如何实现同样的事情(最好是用HTML/CSS -如

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

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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