How to hide placeholder on a button click event?

Question

I have an input text field with placeholder and its value as shown below:

<input type="text" name="test" placeholder="testing">

and I have two buttons, one is used to hide and another one is used to show the placeholder:

<button id="btn-hide">Hide</button>
<button id="btn-show">Show</button>

I want to hide the placeholder when I click on the button hide and show the placeholder when I click on the button show.I have googled and I come to know that it is possible to do by using css, but I still can not find any solution. Can anyone help me either using jquery or css or whatever? Thank you so much for answering my question.

//Already have solutions: [enter link description here](http://stackoverflow.com/questions/9707021/how-do-i-auto-hide-placeholder-text-upon-focus-using-css-or-jquery) — Devsi Odedra, May 17 '16 at 06:56

score 1 · Answer 1 · edited May 17 '16 at 11:01

1

This solution is pure css. It targets all input fields and onFocus it makes the font color transparent.

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

edited May 17 '16 at 11:01

CherryDT

25,571
5
49
74

answered May 17 '16 at 06:52

smobx

67
9

1

Some explanation about your code would improve your answer drastically. – Thomas Bormans May 17 '16 at 09:34
The solution is pure css. It targets all input fields and onFocus it makes the font color transparent. – smobx May 17 '16 at 09:42

score 1 · Accepted Answer · answered May 17 '16 at 06:53

If you wan't jQuery solution. Save your placeholder in a global var so you can reset it.

var placeholder = $('#txtInput').attr('placeholder');

$('#btn-hide').on('click', function() {
 $('#txtInput').attr('placeholder' ,'');
});

$('#btn-show').on('click', function() {
 $('#txtInput').attr('placeholder' ,placeholder);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txtInput" type="text" name="test" placeholder="testing">
<button id="btn-hide">Hide</button>
<button id="btn-show">Show</button>

score 1 · Answer 3 · answered May 17 '16 at 06:54

1

you can remove and add attrbiute with jquery

$('#btn-hide').on('click', function(){

    $('input[name="test"]').removeAttr("placeholder")
})

$('#btn-show').on('click', function(){

    $('input[name="test"]').attr("placeholder", 'text')
})

answered May 17 '16 at 06:54

aseferov

6,155
3
17
24

score 0 · Answer 4 · answered May 17 '16 at 06:54

0

Maybe something like this can help you?

$("#btn-hide").click(function(){
   $("input[name='test']").attr("placeholder"," ");
});
$("#btn-show").click(function(){
   $("input[name='test']").attr("placeholder","testing");
});

P.S: It's not tested

answered May 17 '16 at 06:54

Faisal Ashfaq

2,545
4
28
41

score 0 · Answer 5 · answered May 17 '16 at 06:54

0

Jquery :

$('#btn-hide').click(function(){
  $('input').removeAttr('placeholder');
})

$('#btn-show').click(function(){
  $('input').attr('placeholder','testing');
})

answered May 17 '16 at 06:54

AliN11

2,387
1
25
40

score 0 · Answer 6 · edited May 17 '16 at 06:58

0

if you are using jquery just use this code

 $("#btn-hide").click(function () {
        $("[name=test]").removeAttr("placeholder");
  });

  $("#btn-show").click(function () {
        $("[name=test]").attr("placeholder","testing");
  });

edited May 17 '16 at 06:58

Satpal

132,252
13
159
168

answered May 17 '16 at 06:55

Vishal

21
4

$("test") won't select any thing – Faisal Ashfaq May 17 '16 at 06:57
$('input[name="test"]') you can use it also if it's also not work then give id of your textbox like id="txt" then $("#txt") it's work – Vishal May 17 '16 at 06:59

score 0 · Answer 7 · answered May 17 '16 at 07:04

You need to create a jquery/javascript function to show or hide your controls.

HTML:

<input type="text" name="test" placeholder="testing"/>
<button id="btn-hide" click="hide_text()">Hide</button>
<button id="btn-show" click="show_text()">Show</button>

jQuery:

function hide_text(){
   $('input[placeholder:testing]').hide();
}

function show_text(){
   $('input[placeholder:testing]').show();
}

.show and .hide are jQuery function that will set the display of the indicated control.

score 0 · Answer 8 · answered May 17 '16 at 07:04

You actually don't need separate buttons for hide and show. You could have a single button that toggles placeholder and the button text is changed accordingly. https://jsfiddle.net/x337ey8p/2/

JS (pure)

function togglePlaceholder(btn) {
    var tb = document.getElementById('test1');

    if (tb.placeholder != '') {
       tb.placeholder = '';
       btn.innerHTML = 'Show';
    }
    else {
      tb.placeholder = 'testing';
      btn.innerHTML = 'Hide';
    }
}

HTML

<input id="test1" type="text" name="test" placeholder="testing">
<button id="btn-show" onclick="togglePlaceholder(this)">Hide</button>

score 0 · Answer 9 · answered May 17 '16 at 07:20

I am sharing a pure javascript way to achieve the same. JS(pure)

HTML

<input id="inputId" type="text" name="test" placeholder="testing">
<button id="btn-hide" onclick ='hidePlaceholder()'>Hide</button>
<button id="btn-show" onclick ='showPlaceholder()'>Show</button>

JS

var placeholderVal;
function hidePlaceholder(){
     placeholderVal = document.getElementById("inputId").placeholder;
     document.getElementById("inputId").placeholder = "";
}
function showPlaceholder(){
     document.getElementById("inputId").placeholder = placeholderVal;
}

This is how you can show/hide placeholder of an input using javaScript only. Thanks!

How to hide placeholder on a button click event?

9 Answers9