javascript - 单击更改输入占位符不透明度？

Question

如何在单击按钮时更改文本框的输入占位符不透明度？

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

Answer 1

使用规则 opacity: 0; 创建一个类，并在单击按钮时将此类添加到输入中。

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>