How to display placeholder text on focus?

I have the following placeholder:

 <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>

The input is displayed when the user clicks on an icon with the class "search.icon-search"

I use the following JS code:

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

The problem is that the placeholder disappears on focus. How can I display it even on focus?

---

You need to show .input-text-container , but your code works.

Try this:

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

http://jsfiddle.net/3zkpgvj5/

---

You don't need any JavaScript or jQuery for this. I have a pure CSS solution. You can use an opacity on 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>

链接地址: http://www.djcxy.com/p/70562.html

上一篇: 占位符属性在Internet Explorer中不起作用

下一篇: 如何在焦点上显示占位符文本？