如何在焦点上显示占位符文本？答案

【问题标题】：How to display placeholder text on focus?如何在焦点上显示占位符文本？
【发布时间】：2015-08-15 21:55:13
【问题描述】：

我有以下占位符：

 <div class="input-text-container search" style="display:none;">
    <input type="text" id="textSearch" class="input-text-big search-message" placeholder="Search in your list"/>
    <i class="common-sprite cross search"></i>
</div>

当用户点击一个带有“search.icon-search”类的图标时显示输入

我使用下面的JS代码：

 $('.search.icon-search').on(
        'click',
        function(e) {
            e.preventDefault();
         $('#textSearch').focus()
        });

问题是占位符在焦点上消失了。我如何才能在焦点上显示它？

【问题讨论】：

stackoverflow.com/questions/8574356/…
@saty 这不是答案。看看我的回答。

标签： javascript html input focus placeholder

【解决方案1】：

您需要显示.input-text-container，但您的代码有效。

试试这个：

$('.search.icon-search').on('click',function(e) {
     e.preventDefault();
     $(".input-text-container").show();            
     $('#textSearch').focus()
});

http://jsfiddle.net/3zkpgvj5/

【讨论】：

@For 某种原因 "$(".input-text-container").show()" 不起作用
在 Chrome 和 Firefox 中有效，在 IE11 中无效
可能是因为这个原因：stackoverflow.com/questions/14969959/…
@Radonirina Maminiaina- 我想还有另一个功能可以删除占位符。所以我只添加“$('#textSearch').attr('placeholder','Search in your list')”，就可以了
@SaritSara 你能检查我的代码吗，它不需要任何 JavaScript，而且它也快速简单？只是问......你不需要这样的JavaScript来做一件小事。您的浏览器将被大量加载。

【解决方案2】：

您不需要任何 JavaScript 或 jQuery。我有一个纯 CSS 解决方案。您可以在focus 上使用不透明度。

input {opacity: 0; outline: 0; border: 0;}
input:focus {opacity: 1; outline: 0; border: 0;}
span {border: 1px solid #999; display: inline-block;}

&lt;span&gt;&lt;input placeholder="This is not visible until you click!" /&gt;&lt;/span&gt;

【讨论】：

良好的轻量级 CSS 解决方案
在我看来，如果您需要更改您的 html 并在您的输入周围放置 span，这并不纯粹。
这在 IE11 中有效吗？我没有看到它在 IE 浏览器中工作。
@krish 我认为 IE 11 尚不支持占位符。请参阅 stackoverflow.com/questions/5522164。

【解决方案3】：

input::placeholder{
    opacity: 0;
}

input:focus::placeholder{
    opacity: 1;
}

【讨论】：

欢迎来到 SO！不鼓励仅使用代码的答案，因为它们无法深入了解问题是如何解决的。请更新您的答案，以说明您的代码如何解决 OP 的问题：)