How to display placeholder text on focus?

Question

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?

http://stackoverflow.com/questions/8574356/html5-placeholder-disappears-on-focus — Saty, Jun 02 '15 at 08:01

score 9 · Answer 1 · answered Jun 02 '15 at 08:04

9

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>

answered Jun 02 '15 at 08:04

Praveen Kumar Purushothaman

164,888
24
203
252

1

Good light weight CSS solution – Peter Campbell Jun 02 '15 at 08:17
1

In my opinion it's not pure if you need to alter your html and put span around your inputs. – Machet Mar 02 '17 at 22:53
1

Is this works in IE11 .? i don't see it works in IE browser. – krish May 23 '17 at 16:31
@krish I don't think placeholder is yet supported in IE 11. See https://stackoverflow.com/questions/5522164. – Praveen Kumar Purushothaman May 24 '17 at 10:03

score 3 · Answer 2 · answered Oct 02 '18 at 16:04

3

input::placeholder{
    opacity: 0;
}

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

answered Oct 02 '18 at 16:04

Yohan Jhaveri

109
1
7

2

Welcome to SO! Code-only answers are discouraged as they provide no insight into how the problem was solved. Please update your answer to include an explanation of how your code solves the OP's problem :) – Joel Oct 02 '18 at 16:22
I think this was great and concise, because it's one of the rare situations where all the CSS properties are self-explanatory. Perhaps the pseudoelements is the most advanced part of the code, so I can see a point in providing a link for readers to read about that. – Elton Lin Jun 29 '22 at 18:52

score 2 · Accepted Answer · answered Jun 02 '15 at 08:01

2

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/

answered Jun 02 '15 at 08:01

Radonirina Maminiaina

6,958
4
33
60

@For some reason the "$(".input-text-container").show()" doesn't work – Sarit Sara Jun 02 '15 at 08:14
Works in Chrome and Firefox and not in IE11 – Peter Campbell Jun 02 '15 at 08:16
Maybe because of this reason: http://stackoverflow.com/questions/14969959/jquery-hide-show-code-not-working-in-internet-explorer – Radonirina Maminiaina Jun 02 '15 at 08:19
1

@ Radonirina Maminiaina- I guess there is another function which remove the placeholder. So I just add " $('#textSearch').attr('placeholder','Search in your list')", and it works – Sarit Sara Jun 02 '15 at 08:29
@SaritSara Were you able to check my code, which doesn't require any JavaScript and it is fast and easy too? Just asking... You don't need such JavaScripts for a small thing. Your browser will be loaded heavily. – Praveen Kumar Purushothaman Jun 02 '15 at 08:49
@ Praveen Kumar- as I wrote I guess another function remove the placeholder.... so your code also didn't work for me – Sarit Sara Jun 02 '15 at 09:14
here why you are adding e.preventDefault();? – PHP dev Jun 02 '15 at 09:28
Is this works in IE11 .? i don't see it works in IE browser. – krish May 23 '17 at 16:31

How to display placeholder text on focus?

3 Answers3