CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Patrik Fröhler
Patrik Fröhler

Reputation: 1291

Change input placeholder opacity on click?

How can change the input placeholder opacity of a text box when I click a button?

DEMO

HTML:

<input id="textbox_id"  placeholder="some random text" type="text" />
<button type="button" onClick="btn()" >Click Me!</button>

CSS:

#textbox_id::-webkit-input-placeholder{
    opacity:0;
}

JavaScript/jQuery:

function btn(){
    //alert("test");
    $('#textbox_id::-webkit-input-placeholder').css("opacity", "1");
}

Upvotes: 2

Views: 2215

Answers (2)

Tushar
Tushar

Reputation: 87203

Create a class with the rule opacity: 0; and add this class to the input when button is clicked.

Demo

function btn() {
  $('#textbox_id').toggleClass("myClass");
}
.myClass::-webkit-input-placeholder {
  opacity: 0;
  -webkit-transition: opacity 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input id="textbox_id" placeholder="some random text" type="text" />
<button type="button" onClick="btn()">Click Me!</button>

Upvotes: 4

Ant
Ant

Reputation: 462

You can achieve this by switching out a class on the textbox: New Fiddle

function btn() {
  $('#textbox_id').removeClass('hiddenPlaceholder');
  $('#textbox_id').addClass('Placeholder');
}
.hiddenPlaceholder::-webkit-input-placeholder {
  opacity: 0;
}
.Placeholder::-webkit-input-placeholder {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="textbox_id" class="hiddenPlaceholder" placeholder="some random text" type="text" />
<button type="button" onClick="btn()">Click Me!</button>

Upvotes: 1

Related Questions