blocks|key|2898896|text|<input+
type="text"+
placeholder="enter+your+text"+
onfocus="this.placeholder+=+''"
onblur="this.placeholder+=+'enter+your+text'"+/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2898897|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;input 
type="text" 
placeholder="enter your text" 
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" /&gt;
</code></pre>


blocks|key|3113162|text|编辑:现在所有浏览器都支持|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3113163|​|3113164|input:focus::placeholder+{
++color:+transparent;
}|code-block|syntax|javascript|3113165|<input+type="text"+placeholder="Type+something+here!">|3113166|3113167|Firefox15和IE+10%2B现在也支持这一点。扩展Casey+Chu的CSS+solution|offset|length|3113168|input:focus::-webkit-input-placeholder+{+color:transparent;+}
input:focus:-moz-placeholder+{+color:transparent;+}+/*+FF+4-18+*/
input:focus::-moz-placeholder+{+color:transparent;+}+/*+FF+19%2B+*/
input:focus:-ms-input-placeholder+{+color:transparent;+}+/*+IE+10%2B+*/|3113169|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/11920714/12892^0|0|0|0|0|0|15|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|14|8|@]|9|@$N|15|O|16|1|17]]|A|$]]|$1|P|3|Q|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<p>Edit:
All browsers support now</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input:focus::placeholder {
  color: transparent;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" placeholder="Type something here!"&gt;</code></pre>
</div>
</div>
</p>

<p>Firefox 15 and IE 10+ also supports this now. To expand on Casey Chu's CSS <a href="https://stackoverflow.com/a/11920714/12892">solution</a>:</p>

<pre><code>input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
</code></pre>


blocks|key|2898966|text|以下是一个仅适用于CSS的解决方案(目前，仅适用于WebKit)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2898967|input:focus::-webkit-input-placeholder+{
++++opacity:+0;
}|code-block|syntax|javascript|2898968|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>Here is a CSS-only solution (for now, only works in WebKit):</p>

<pre><code>input:focus::-webkit-input-placeholder {
    opacity: 0;
}
</code></pre>


blocks|key|3113258|text|纯CSS解决方案(不需要JS+)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3113259|基于@Hexodus和@Casey+Chu的回答，这里是一个更新的跨浏览器解决方案，它利用CSS不透明度和过渡来淡出占位符文本。它适用于任何可以使用占位符的元素，包括textarea和input标签。|offset|length|style|CODE|3113260|​|3113261|::-webkit-input-placeholder+{+opacity:+1;+-webkit-transition:+opacity+.5s;+transition:+opacity+.5s;+}++/*+Chrome+<=56,+Safari+<+10+*/
:-moz-placeholder+{+opacity:+1;+-moz-transition:+opacity+.5s;+transition:+opacity+.5s;+}+/*+FF+4-18+*/
::-moz-placeholder+{+opacity:+1;+-moz-transition:+opacity+.5s;+transition:+opacity+.5s;+}+/*+FF+19-51+*/
:-ms-input-placeholder+{+opacity:+1;+-ms-transition:+opacity+.5s;+transition:+opacity+.5s;+}+/*+IE+10%2B+*/
::placeholder+{+opacity:+1;+transition:+opacity+.5s;+}+/*+Modern+Browsers+*/
++++
*:focus::-webkit-input-placeholder+{+opacity:+0;+}+/*+Chrome+<=56,+Safari+<+10+*/
*:focus:-moz-placeholder+{+opacity:+0;+}+/*+FF+4-18+*/
*:focus::-moz-placeholder+{+opacity:+0;+}+/*+FF+19-50+*/
*:focus:-ms-input-placeholder+{+opacity:+0;+}+/*+IE+10%2B+*/
*:focus::placeholder+{+opacity:+0;+}+/*+Modern+Browsers+*/|code-block|syntax|javascript|3113262|<div>
++<div><label+for="a">Input:</label></div>
++<input+id="a"+type="text"+placeholder="CSS+native+fade+out+this+placeholder+text+on+click/focus"+size="60">
</div>

<br>

<div>
++<div><label+for="b">Textarea:</label></div>
++<textarea+id="b"+placeholder="CSS+native+fade+out+this+placeholder+text+on+click/focus"+rows="3"></textarea>
</div>|3113263|3113264|修订版|3113265|3113266|编辑1+(2017)：更新以支持现代浏览器。|unordered-list-item|3113267|编辑2+(2020)：添加了可运行的堆栈代码段。|3113268|3113269|entityMap^0|0|2B|8|2K|5|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@$D|14|E|15|F|G]|$D|16|E|17|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|1A|8|@]|9|@]|A|$M|N]]|$1|Q|3|I|5|6|7|1B|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1C|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|U|3|V|5|W|7|1E|8|@]|9|@]|A|$]]|$1|X|3|Y|5|W|7|1F|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|11|$]]

<h1>Pure CSS Solution (no JS required)</h1>
<p>Building on @Hexodus and @Casey Chu's answers, here is an updated and cross-browser solution that leverages CSS opacity and transitions to fade the placeholder text out.  It works for any element that can use placeholders, including <code>textarea</code> and <code>input</code> tags.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome &lt;=56, Safari &lt; 10 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */
    
*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome &lt;=56, Safari &lt; 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;div&gt;&lt;label for="a"&gt;Input:&lt;/label&gt;&lt;/div&gt;
  &lt;input id="a" type="text" placeholder="CSS native fade out this placeholder text on click/focus" size="60"&gt;
&lt;/div&gt;

&lt;br&gt;

&lt;div&gt;
  &lt;div&gt;&lt;label for="b"&gt;Textarea:&lt;/label&gt;&lt;/div&gt;
  &lt;textarea id="b" placeholder="CSS native fade out this placeholder text on click/focus" rows="3"&gt;&lt;/textarea&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<h3>Revisions</h3>
<ul>
<li><em>Edit 1 (2017): Updated to support modern browsers.</em></li>
<li><em>Edit 2 (2020): Added the runnable Stack Snippet.</em></li>
</ul>


blocks|key|237913|text|你试过占位符吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|237914|<input+id+="myID"+type="text"+placeholder="enter+your+text+"+/>|code-block|syntax|javascript|237915|-编辑-|237916|我明白了，那就试试这个：|237917|$(function+()+{

++++$('#myId').data('holder',+$('#myId').attr('placeholder'));

++++$('#myId').focusin(function+()+{
++++++++$(this).attr('placeholder',+'');
++++});
++++$('#myId').focusout(function+()+{
++++++++$(this).attr('placeholder',+$(this).data('holder'));
++++});


});|237918|测试：http://jsfiddle.net/mPLFf/4/|offset|length|237919|237920|实际上，因为占位符应该用来描述值，而不是输入的名称。我建议采取以下替代方案|237921|html:|style|BOLD|237922|<label+class="overlabel">+
++++<span>First+Name</span>
++++<input+name="first_name"+type="text"+/>
</label>|237923|javascript:|237924|$('.overlabel').each(function+()+{
++++var+$this+=+$(this);
++++var+field+=+$this.find('[type=text],+[type=file],+[type=email],+[type=password],+textarea');
++++var+span+=+$(this).find('>+span');
++++var+onBlur+=+function+()+{
++++++++if+($.trim(field.val())+==+'')+{
++++++++++++field.val('');
++++++++++++span.fadeIn(100);
++++++++}+else+{
++++++++++++span.fadeTo(100,+0);
++++++++}
++++};
++++field.focus(function+()+{
++++++++span.fadeOut(100);
++++}).blur(onBlur);
++++onBlur();
});|237925|css:|237926|.overlabel+{
++border:+0.1em+solid;
++color:+#aaa;
++position:+relative;
++display:+inline-block;
++vertical-align:+middle;
++min-height:+2.2em;
}
.overlabel+span+{
++position:+absolute;
++left:+0;
++top:+0;
++white-space:+nowrap;
++overflow:+hidden;
++text-overflow:+ellipsis;
}
.overlabel+span,+.overlabel+input+{
++text-align:+left;
++font-size:+1em;
++line-height:+2em;
++padding:+0+0.5em;
++margin:+0;
++background:+transparent;
++-webkit-appearance:+none;+/*+prevent+ios+styling+*/
++border-width:+0;
++width:+100%25;
++outline:+0;
}|237927|测试：|237928|http://jsfiddle.net/kwynwrcf/|237929|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/mPLFf/4/|1^0|0|0|0|0|0|3|S|0|0|0|0|0|5|0|0|0|B|0|0|0|4|0|0|0|0|T|1|0^^$0|@$1|2|3|4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1M|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1N|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|1O|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|1P|8|@]|9|@$O|1Q|P|1R|1|1S]]|A|$]]|$1|Q|3|H|5|6|7|1T|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1U|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1V|8|@$O|1W|P|1X|V|W]]|9|@]|A|$]]|$1|X|3|Y|5|D|7|1Y|8|@]|9|@]|A|$E|F]]|$1|Z|3|10|5|6|7|1Z|8|@$O|20|P|21|V|W]]|9|@]|A|$]]|$1|11|3|12|5|D|7|22|8|@]|9|@]|A|$E|F]]|$1|13|3|14|5|6|7|23|8|@$O|24|P|25|V|W]]|9|@]|A|$]]|$1|15|3|16|5|D|7|26|8|@]|9|@]|A|$E|F]]|$1|17|3|18|5|6|7|27|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|28|8|@]|9|@$O|29|P|2A|1|2B]]|A|$]]|$1|1B|3|-4|5|6|7|2C|8|@]|9|@]|A|$]]]|1C|$1D|$5|1E|1F|1G|A|$1H|1I]]|1J|$5|1E|1F|1G|A|$1H|1A]]]]

<p>have you tried placeholder attr?</p>

<pre><code>&lt;input id ="myID" type="text" placeholder="enter your text " /&gt;
</code></pre>

<p>-EDIT-</p>

<p>I see, try this then:</p>

<pre><code>$(function () {

    $('#myId').data('holder', $('#myId').attr('placeholder'));

    $('#myId').focusin(function () {
        $(this).attr('placeholder', '');
    });
    $('#myId').focusout(function () {
        $(this).attr('placeholder', $(this).data('holder'));
    });


});
</code></pre>

<p>Test: <a href="http://jsfiddle.net/mPLFf/4/" rel="noreferrer">http://jsfiddle.net/mPLFf/4/</a></p>

<p>-EDIT-</p>

<p>Actually, since placeholder should be used to describe the value, not the name of the input. I suggest the following alternative</p>

<p><strong>html:</strong></p>

<pre><code>&lt;label class="overlabel"&gt; 
    &lt;span&gt;First Name&lt;/span&gt;
    &lt;input name="first_name" type="text" /&gt;
&lt;/label&gt;
</code></pre>

<p><strong>javascript:</strong></p>

<pre><code>$('.overlabel').each(function () {
    var $this = $(this);
    var field = $this.find('[type=text], [type=file], [type=email], [type=password], textarea');
    var span = $(this).find('&gt; span');
    var onBlur = function () {
        if ($.trim(field.val()) == '') {
            field.val('');
            span.fadeIn(100);
        } else {
            span.fadeTo(100, 0);
        }
    };
    field.focus(function () {
        span.fadeOut(100);
    }).blur(onBlur);
    onBlur();
});
</code></pre>

<p><strong>css:</strong> </p>

<pre><code>.overlabel {
  border: 0.1em solid;
  color: #aaa;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  min-height: 2.2em;
}
.overlabel span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overlabel span, .overlabel input {
  text-align: left;
  font-size: 1em;
  line-height: 2em;
  padding: 0 0.5em;
  margin: 0;
  background: transparent;
  -webkit-appearance: none; /* prevent ios styling */
  border-width: 0;
  width: 100%;
  outline: 0;
}
</code></pre>

<p>Test:</p>

<p><a href="http://jsfiddle.net/kwynwrcf/" rel="noreferrer">http://jsfiddle.net/kwynwrcf/</a></p>


blocks|key|237975|text|为了补充@casey-chu和海盗rob的答案，这里有一种更跨浏览器兼容的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|237976|++++/*+WebKit+browsers+*/
input:focus::-webkit-input-placeholder+{+color:transparent;+}

++++/*+Mozilla+Firefox+4+to+18+*/
input:focus:-moz-placeholder+{+color:transparent;+}

++++/*+Mozilla+Firefox+19%2B+*/
input:focus::-moz-placeholder+{+color:transparent;+}

++++/*+Internet+Explorer+10%2B+*/
input:focus:-ms-input-placeholder+{+color:transparent;+}|code-block|syntax|javascript|237977|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>To augment @casey-chu's and pirate rob's answer, here's a more cross browser compatible way:</p>

<pre><code>    /* WebKit browsers */
input:focus::-webkit-input-placeholder { color:transparent; }

    /* Mozilla Firefox 4 to 18 */
input:focus:-moz-placeholder { color:transparent; }

    /* Mozilla Firefox 19+ */
input:focus::-moz-placeholder { color:transparent; }

    /* Internet Explorer 10+ */
input:focus:-ms-input-placeholder { color:transparent; }
</code></pre>


blocks|key|3113136|text|Toni的回答很好，但我更愿意去掉ID，显式地使用input，这样所有使用placeholder的输入都会得到这样的行为：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3113137|<input+type="text"+placeholder="your+text"+/>|code-block|syntax|javascript|3113138|请注意，$(function(){+});是$(document).ready(function(){+});的缩写|3113139|$(function(){
++++$('input').data('holder',$('input').attr('placeholder'));
++++$('input').focusin(function(){
++++++++$(this).attr('placeholder','');
++++});
++++$('input').focusout(function(){
++++++++$(this).attr('placeholder',$(this).data('holder'));
++++});
})|3113140|3113141|entityMap^0|H|2|P|5|11|B|0|0|4|H|M|X|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|Q|$]]

<p>Toni's answer is good, but I'd rather drop the <code>ID</code> and explicitly use <code>input</code>, that way all inputs with <code>placeholder</code> get the behavior:</p>

<pre><code>&lt;input type="text" placeholder="your text" /&gt;
</code></pre>

<p>Note that <code>$(function(){ });</code> is the shorthand for <code>$(document).ready(function(){ });</code>:</p>

<pre><code>$(function(){
    $('input').data('holder',$('input').attr('placeholder'));
    $('input').focusin(function(){
        $(this).attr('placeholder','');
    });
    $('input').focusout(function(){
        $(this).attr('placeholder',$(this).data('holder'));
    });
})
</code></pre>

<p><strong><a href="http://jsfiddle.net/dreamyguy/6CzRq/5/" rel="nofollow">Demo.</a></strong></p>


blocks|key|232479|text|我喜欢将其打包在名称空间中，并在具有"placeholder“属性的元素上运行……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|232480|$("[placeholder]").togglePlaceholder();

$.fn.togglePlaceholder+=+function()+{
++++return+this.each(function()+{
++++++++$(this)
++++++++.data("holder",+$(this).attr("placeholder"))
++++++++.focusin(function(){
++++++++++++$(this).attr('placeholder','');
++++++++})
++++++++.focusout(function(){
++++++++++++$(this).attr('placeholder',$(this).data('holder'));
++++++++});
++++});
};|code-block|syntax|javascript|232481|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>I like to package this up in the name space and run on elements with the "placeholder" attribute...</p>

<pre><code>$("[placeholder]").togglePlaceholder();

$.fn.togglePlaceholder = function() {
    return this.each(function() {
        $(this)
        .data("holder", $(this).attr("placeholder"))
        .focusin(function(){
            $(this).attr('placeholder','');
        })
        .focusout(function(){
            $(this).attr('placeholder',$(this).data('holder'));
        });
    });
};
</code></pre>


blocks|key|235279|text|有时你需要明确你的风格，以确保你的风格被应用到最强的因子id感谢@Rob+Fletcher的伟大回答，在我们公司中我们已经使用过|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|235280|因此，请考虑添加以应用程序容器id为前缀的样式|235281|​|235282|++++#app+input:focus::-webkit-input-placeholder,+#app++textarea:focus::-webkit-input-placeholder+{
++++++++color:+#FFFFFF;
++++}

++++#app+input:focus:-moz-placeholder,+#app+textarea:focus:-moz-placeholder+{
++++++++color:+#FFFFFF;
++++}|code-block|syntax|javascript|235283|235284|entityMap^0|S|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|V|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|W|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>Sometimes you need <em>SPECIFICITY</em> to make sure your styles are applied with strongest factor <code>id</code> Thanks for @Rob Fletcher for his great answer, in our company we have used</p>

<p>So please consider adding styles prefixed with the id of the app container</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    #app input:focus::-webkit-input-placeholder, #app  textarea:focus::-webkit-input-placeholder {
        color: #FFFFFF;
    }

    #app input:focus:-moz-placeholder, #app textarea:focus:-moz-placeholder {
        color: #FFFFFF;
    }</code></pre>
</div>
</div>
</p>


blocks|key|3113356|text|对于纯CSS，它对我来说是有效的。输入时使其透明/在输入中聚焦|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3113357|+input:focus::-webkit-input-placeholder+{+/*+Chrome/Opera/Safari+*/
++++color:+transparent+!important;
+}
+input:focus::-moz-placeholder+{+/*+Firefox+19%2B+*/
+++color:+transparent+!important;
+}
+input:focus:-ms-input-placeholder+{+/*+IE+10%2B+*/
+++color:+transparent+!important;
+}
+input:focus:-moz-placeholder+{+/*+Firefox+18-+*/
+++color:+transparent+!important;
++}|code-block|syntax|javascript|3113358|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>With Pure CSS it worked for me. Make it transparent when Entered/Focues in input</p>

<pre><code> input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: transparent !important;
 }
 input:focus::-moz-placeholder { /* Firefox 19+ */
   color: transparent !important;
 }
 input:focus:-ms-input-placeholder { /* IE 10+ */
   color: transparent !important;
 }
 input:focus:-moz-placeholder { /* Firefox 18- */
   color: transparent !important;
  }
</code></pre>


blocks|key|2898997|text|要进一步细化Wallace+Sidhrée的代码示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2898998|$(function()
{++
++++++$('input').focusin(function()
++++++{
++++++++input+=+$(this);
++++++++input.data('place-holder-text',+input.attr('placeholder'))
++++++++input.attr('placeholder',+'');
++++++});

++++++$('input').focusout(function()
++++++{
++++++++++input+=+$(this);
++++++++++input.attr('placeholder',+input.data('place-holder-text'));
++++++});
})|code-block|syntax|javascript|2898999|这可确保每个输入在数据属性中存储正确的占位符文本。|2899000|请参阅working+example+here+in+jsFiddle。|2899001|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/909777/wallace-sidhree|1|http://jsfiddle.net/truetone/sHYz3/3/^0|6|F|0|0|0|0|3|W|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<p>To further refine <a href="https://stackoverflow.com/users/909777/wallace-sidhree">Wallace Sidhrée</a>'s code sample:</p>

<pre><code>$(function()
{  
      $('input').focusin(function()
      {
        input = $(this);
        input.data('place-holder-text', input.attr('placeholder'))
        input.attr('placeholder', '');
      });

      $('input').focusout(function()
      {
          input = $(this);
          input.attr('placeholder', input.data('place-holder-text'));
      });
})
</code></pre>

<p>This ensures that each input stores the correct placeholder text in the data attribute.</p>

<p>See a <a href="http://jsfiddle.net/truetone/sHYz3/3/" rel="nofollow noreferrer">working example here in jsFiddle</a>.</p>


blocks|key|3113187|text|我喜欢带有过渡的css方法。在焦点上，占位符淡出;)也适用于文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3113188|感谢@Casey+Chu的好主意。|3113189|textarea::-webkit-input-placeholder,+input::-webkit-input-placeholder+{+
++++color:+#fff;
++++opacity:+0.4;
++++transition:+opacity+0.5s;
++++-webkit-transition:+opacity+0.5s;+
}

textarea:focus::-webkit-input-placeholder,+input:focus::-webkit-input-placeholder++{+
++++opacity:+0;
}|code-block|syntax|javascript|3113190|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I like the css approach spiced with transitions. On Focus the placeholder fades out ;) Works also for textareas.</p>

<p>Thanks @Casey Chu for the great idea.</p>



<pre class="lang-css prettyprint-override"><code>textarea::-webkit-input-placeholder, input::-webkit-input-placeholder { 
    color: #fff;
    opacity: 0.4;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s; 
}

textarea:focus::-webkit-input-placeholder, input:focus::-webkit-input-placeholder  { 
    opacity: 0;
}
</code></pre>


blocks|key|232535|text|结合使用SCSS和http://bourbon.io/，这个解决方案简单、优雅，并且可以在所有web浏览器上运行：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|232536|input:focus+{
++@include+placeholder()+{
++++color:+transparent;
++}
}|code-block|syntax|javascript|232537|使用波旁！这对你有好处！|232538|entityMap|0|LINK|mutability|MUTABLE|url|http://bourbon.io/^0|9|I|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>Using SCSS along with <a href="http://bourbon.io/" rel="nofollow">http://bourbon.io/</a>, this solution is simple, elegant, and works on all web browsers:</p>

<pre><code>input:focus {
  @include placeholder() {
    color: transparent;
  }
}
</code></pre>

<p>Use Bourbon ! It's good for you !</p>


blocks|key|237979|text|下面这段CSS对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|237980|input:focus::-webkit-input-placeholder+{
++++++++color:transparent;

}|code-block|syntax|javascript|237981|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>This piece of CSS worked for me:  </p>

<pre><code>input:focus::-webkit-input-placeholder {
        color:transparent;

}
</code></pre>


blocks|key|237983|text|对于纯基于CSS的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|237984|input:focus::-webkit-input-placeholder++{color:transparent;}
input:focus::-moz-placeholder+++{color:transparent;}
input:-moz-placeholder+++{color:transparent;}|code-block|syntax|javascript|237985|注意:并非所有浏览器供应商都支持。|offset|length|style|BOLD|237986|参考:+Ilia+Raiskin的Hide+placeholder+text+on+focus+with+CSS。|237987|entityMap|0|LINK|mutability|MUTABLE|url|http://www.toolinfy.com/hide-placeholder-text-on-focus-css^0|0|0|0|G|0|H|13|0|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|@$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@$I|12|J|13|1|14]]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>For a pure CSS based solution:
</p>

<pre><code>input:focus::-webkit-input-placeholder  {color:transparent;}
input:focus::-moz-placeholder   {color:transparent;}
input:-moz-placeholder   {color:transparent;}
</code></pre>

<p><strong>Note:</strong> 
Not yet supported by all browser vendors.</p>

<p>Reference: <a href="http://www.toolinfy.com/hide-placeholder-text-on-focus-css" rel="nofollow">Hide placeholder text on focus with CSS</a> by Ilia Raiskin.</p>


blocks|key|232459|text|HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|232460|<input+type="text"+name="name"+placeholder="enter+your+text"+id="myInput"+/>|code-block|syntax|javascript|232461|jQuery:|offset|length|style|BOLD|232462|$('#myInput').focus(function(){
++$(this).attr('placeholder','');
});
$('#myInput').focusout(function(){
++$(this).attr('placeholder','enter+your+text');
});|232463|entityMap^0|0|0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p><strong>HTML:</strong></p>

<pre><code>&lt;input type="text" name="name" placeholder="enter your text" id="myInput" /&gt;
</code></pre>

<p><strong>jQuery:</strong></p>

<pre><code>$('#myInput').focus(function(){
  $(this).attr('placeholder','');
});
$('#myInput').focusout(function(){
  $(this).attr('placeholder','enter your text');
});
</code></pre>


blocks|key|238039|text|2018+>jQueryv.3.3解决方案：全局处理所有输入，带占位符的文本区域。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|238040|+$(function(){
+++++$('input,+textarea').on('focus',+function(){
++++++++if($(this).attr('placeholder')){
+++++++++++window.oldph+=+$(this).attr('placeholder');
++++++++++++$(this).attr('placeholder',+'+');
++++++++};
+++++});

+++++$('input,+textarea').on('blur',+function(){
+++++++if($(this).attr('placeholder')){
++++++++++++$(this).attr('placeholder',+window.oldph);
+++++++++};
+++++});+
});|code-block|syntax|javascript|238041|entityMap^0|0|M|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p><strong>2018 > JQUERY v.3.3 SOLUTION:</strong>
Working globaly for all input, textarea with placeholder.</p>

<pre><code> $(function(){
     $('input, textarea').on('focus', function(){
        if($(this).attr('placeholder')){
           window.oldph = $(this).attr('placeholder');
            $(this).attr('placeholder', ' ');
        };
     });

     $('input, textarea').on('blur', function(){
       if($(this).attr('placeholder')){
            $(this).attr('placeholder', window.oldph);
         };
     }); 
});
</code></pre>


blocks|key|2898970|text|演示在这里：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2898971|试试这个：|2898972|//auto-hide-placeholder-text-upon-focus
if(!$.browser.webkit){
$("input").each(
++++++++function(){
++++++++++++$(this).data('holder',$(this).attr('placeholder'));
++++++++++++$(this).focusin(function(){
++++++++++++++++$(this).attr('placeholder','');
++++++++++++});
++++++++++++$(this).focusout(function(){
++++++++++++++++$(this).attr('placeholder',$(this).data('holder'));
++++++++++++});

++++++++});

}|code-block|syntax|javascript|2898973|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Demo is here: <strong><a href="http://jsfiddle.net/sureshpattu/5MG8b/3/" rel="nofollow">jsfiddle</a></strong></p>

<p>Try this :</p>

<pre><code>//auto-hide-placeholder-text-upon-focus
if(!$.browser.webkit){
$("input").each(
        function(){
            $(this).data('holder',$(this).attr('placeholder'));
            $(this).focusin(function(){
                $(this).attr('placeholder','');
            });
            $(this).focusout(function(){
                $(this).attr('placeholder',$(this).data('holder'));
            });

        });

}
</code></pre>


blocks|key|2899091|text|对于输入|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2899092|input:focus::-webkit-input-placeholder+{+color:transparent;+}
input:focus:-moz-placeholder+{+color:transparent;+}|code-block|syntax|javascript|2899093|对于文本区域|2899094|textarea:focus::-webkit-input-placeholder+{+color:transparent;+}
textarea:focus:-moz-placeholder+{+color:transparent;+}|2899095|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|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>for input</p>

<pre><code>input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
</code></pre>

<p>for textarea</p>

<pre><code>textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
</code></pre>


blocks|key|3113231|text|$("input[placeholder]").focusin(function+()+{
++++$(this).data('place-holder-text',+$(this).attr('placeholder')).attr('placeholder',+'');
})
.focusout(function+()+{
++++$(this).attr('placeholder',+$(this).data('place-holder-text'));
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3113232|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$("input[placeholder]").focusin(function () {
    $(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
    $(this).attr('placeholder', $(this).data('place-holder-text'));
});
</code></pre>


blocks|key|236363|text|$("input[placeholder]").each(function+()+{
++++$(this).attr("data-placeholder",+this.placeholder);

++++$(this).bind("focus",+function+()+{
++++++++this.placeholder+=+'';
++++});
++++$(this).bind("blur",+function+()+{
++++++++this.placeholder+=+$(this).attr("data-placeholder");
++++});
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|236364|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$("input[placeholder]").each(function () {
    $(this).attr("data-placeholder", this.placeholder);

    $(this).bind("focus", function () {
        this.placeholder = '';
    });
    $(this).bind("blur", function () {
        this.placeholder = $(this).attr("data-placeholder");
    });
});
</code></pre>


blocks|key|2899221|text|不需要使用任何CSS或JQuery。您可以直接在HTML+input标记中执行此操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2899222|例如，在下面的电子邮件框中，在内部单击后，占位符文本将消失，如果在外部单击，文本将再次出现。|2899223|<input+type="email"+placeholder="Type+your+email+here..."+onfocus="this.placeholder=''"+onblur="this.placeholder='Type+your+email+here...'">|code-block|syntax|javascript|2899224|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>No need to use any CSS or JQuery. You can do it right from the HTML input tag.</p>

<p><strong>For example</strong>, In below email box, the placeholder text will disappear after clicking inside and the text will appear again if clicked outside.</p>

<pre><code>&lt;input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'"&gt;
</code></pre>


blocks|key|235317|text|如果您的输入背景颜色为白色，则可以在焦点上设置占位符文本颜色以匹配输入背景-理论上使文本不可见。如果你输入的是一种不同的颜色，那么只需简单地改变颜色来匹配它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|235318|input:focus::placeholder+{
++color:+white;
}|code-block|syntax|javascript|235319|此外，您还可以将其他答案中显示的颜色设置为“透明”。|235320|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If your input background color is white, then you can set the placeholder text color on focus to match the input background - making the text invisible; theoretically. If you're input is a different color, then just simply change the color to match it.</p>
<pre><code>input:focus::placeholder {
  color: white;
}
</code></pre>
<p>Also, you can set the color to &quot;transparent&quot; shown in other answers.</p>


blocks|key|2899147|text|除了以上所有之外，我还有两个想法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2899148|您可以添加一个模仿palceholder.Then的元素，使用javascript控制元素的显示和隐藏。|2899149|但它太复杂了，另一个是使用兄弟的css.Just选择器，如下所示：|2899150|​|2899151|.placeholder+{+position:+absolute;+font-size:+14px;+left:+40px;+top:+11px;+line-height:+1;+pointer-events:+none;+}
.send-message+input:focus+%2B+.placeholder+{+display:+none;+}+|code-block|syntax|javascript|2899152|2899153|23333，我有一个糟糕的English.Hope解决了你的问题。|2899154|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|V|8|@]|9|@]|A|$K|L]]|$1|M|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>Besides all of above,I have two ideas.</p>

<p>You can add an element that imitates the palceholder.Then using javascript control the element showing and hiding.</p>

<p>But it is so complex,the other one is using the brother's selector of css.Just like this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>.placeholder { position: absolute; font-size: 14px; left: 40px; top: 11px; line-height: 1; pointer-events: none; }
.send-message input:focus + .placeholder { display: none; } </code></pre>
</div>
</div>
</p>

<p>23333,I have a poor English.Hope solve your problem.</p>


blocks|key|2899156|text|尝试此函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2899157|%2B它隐藏焦点上的PlaceHolder并将其返回到模糊上|2899158|%2B此函数依赖于占位符选择器，首先它选择具有占位符属性的元素，触发一个聚焦函数和另一个模糊函数。|2899159|在焦点上:它向元素添加一个属性"data-text“，该元素从占位符属性中获取其值，然后删除占位符属性的值。|2899160|on+blur+:返回占位符值并将其从data-text属性中删除|2899161|<input+type="text"+placeholder="Username"+/>|code-block|syntax|javascript|2899162|$('[placeholder]').focus(function()+{
++++$(this).attr('data-text',+$(this).attr('placeholder'));
++++$(this).attr('placeholder',+'');
++}).blur(function()+{
++++++$(this).attr('placeholder',+$(this).attr('data-text'));
++++++$(this).attr('data-text',+'');
++});
});|2899163|如果您通过检查input元素来查看幕后发生的事情，那么您可以很好地理解我的意思|2899164|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|Z|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|10|8|@]|9|@]|A|$M|N]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>try this function:</p>

<p>+It Hides The PlaceHolder On Focus And Returns It Back On Blur</p>

<p>+This function depends on the placeholder selector, first it selects the elements with the placeholder attribute, triggers a function on focusing and another one on blurring.</p>

<p>on focus : it adds an attribute "data-text" to the element which gets its value from the placeholder attribute then it removes the value of the placeholder attribute.</p>

<p>on blur : it returns back the placeholder value and removes it from the data-text attribute</p>

<pre class="lang-html prettyprint-override"><code>&lt;input type="text" placeholder="Username" /&gt;
</code></pre>





<pre class="lang-js prettyprint-override"><code>$('[placeholder]').focus(function() {
    $(this).attr('data-text', $(this).attr('placeholder'));
    $(this).attr('placeholder', '');
  }).blur(function() {
      $(this).attr('placeholder', $(this).attr('data-text'));
      $(this).attr('data-text', '');
  });
});
</code></pre>

<p>you can follow me very well if you look what's happening behind the scenes by inspecting the input element</p>


blocks|key|2899181|text|我在angular+5中也应用了同样的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2899182|我创建了一个用于存储占位符的新字符串|2899183|newPlaceholder:string;|code-block|syntax|javascript|2899184|然后我在输入框上使用了焦点和模糊函数(我使用的是素数ng自动补全)。|2899185|​|2899186|上面的占位符是从typescript设置的|2899187|我使用的两个函数-|2899188|/*+Event+fired+on+focus+to+textbox*/
Focus(data)+{
++++this.newPlaceholder+=+data.target.placeholder;
++++this.placeholder+=+'';
}
/*+Event+fired+on+mouse+out*/
Blur(data)+{
++++this.placeholder+=+this.newPlaceholder;
}|2899189|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>The same thing i have applied in angular 5.</p>

<p>i created a new string for storing placeholder</p>

<pre><code>newPlaceholder:string;
</code></pre>

<p>then i have used focus and blur functions on input box(i am using prime ng autocomplete).</p>

<p></p>

<p>Above placeholder is being set from typescript</p>

<p>Two functions i am using -</p>

<pre><code>/* Event fired on focus to textbox*/
Focus(data) {
    this.newPlaceholder = data.target.placeholder;
    this.placeholder = '';
}
/* Event fired on mouse out*/
Blur(data) {
    this.placeholder = this.newPlaceholder;
}
</code></pre>


blocks|key|3113304|text|/*+Webkit+*/
[placeholder]:focus::-webkit-input-placeholder+{+opacity:+0;+}
/*+Firefox+<+19+*/
[placeholder]:focus:-moz-placeholder+{+opacity:+0;+}
/*+Firefox+>+19+*/
[placeholder]:focus::-moz-placeholder+{+opacity:+0;+}
/*+Internet+Explorer+10+*/
[placeholder]:focus:-ms-input-placeholder+{+opacity:+0;+}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3113305|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>/* Webkit */
[placeholder]:focus::-webkit-input-placeholder { opacity: 0; }
/* Firefox &lt; 19 */
[placeholder]:focus:-moz-placeholder { opacity: 0; }
/* Firefox &gt; 19 */
[placeholder]:focus::-moz-placeholder { opacity: 0; }
/* Internet Explorer 10 */
[placeholder]:focus:-ms-input-placeholder { opacity: 0; }
</code></pre>


<p>This is done automatically for every browser except <strong>Chrome</strong>.</p>

<p>I'm guessing I have to specifically target <strong>Chrome</strong>.</p>

<p>Any solutions?</p>

<p>If not with <strong>CSS</strong>, then with <strong>jQuery</strong>?</p>

<p>Kind regards.</p>


How do I auto-hide placeholder text upon focus using css or jquery?

容器

jQuery

除了Chrome之外，每个浏览器都会自动完成此操作。我猜我必须特别针对Chrome。有什么解决方案吗？如果不使用CSS，则使用jQuery致以亲切的问候。

问如何使用css或jquery在聚焦时自动隐藏占位符文本？
EN

回答 27

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用css或jquery在聚焦时自动隐藏占位符文本？EN

回答 27

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用css或jquery在聚焦时自动隐藏占位符文本？
EN