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

How to display placeholder text on focus?

本文关键字：显示 占位符 文本 焦点      更新时间：2023-09-26

我有以下占位符:

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

问题是占位符在焦点处消失了。如何在对焦时显示它?

您不需要任何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>

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

您需要显示.input-text-container，但是您的代码可以工作。

试试这个:

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

http://jsfiddle.net/3zkpgvj5/

相关文章：