CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ken Phanith
Ken Phanith

Reputation: 53

How to hide placeholder on a button click event?

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.

Upvotes: 5

Views: 9948

Answers (9)

smobx
smobx

Reputation: 67

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+ */

Upvotes: 1

Rahul Tiwari
Rahul Tiwari

Reputation: 81

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!

Upvotes: 0

Nikhil Vartak
Nikhil Vartak

Reputation: 5127

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>

Upvotes: 0

Frederick
Frederick

Reputation: 169

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.

Upvotes: 0

Vishal
Vishal

Reputation: 21

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

Upvotes: 0

aseferov
aseferov

Reputation: 6393

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')
})

Upvotes: 1

AliN11
AliN11

Reputation: 2573

Jquery :

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

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

Upvotes: 0

Faisal Ashfaq
Faisal Ashfaq

Reputation: 2678

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

Upvotes: 0

Paran0a
Paran0a

Reputation: 3457

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>

Upvotes: 1

Related Questions