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

Question

我有以下占位符：

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

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

Answer 1

为此，您不需要任何 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;}

<span><input placeholder="This is not visible until you click!" /></span>