Javascript 单击时更改输入占位符不透明度？

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

HTML:

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

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

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

JavaScript/jQuery:

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

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

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

---

使用规则

opacity:0创建一个类

并在单击按钮时将此类添加到输入中

函数btn（）{
$（'#textbox_id'）。切换类（“myClass”）；
}

.myClass:：-webkit输入占位符{
不透明度：0；
-webkit过渡：不透明度1s线性；
}

点击我您可以通过切换文本框上的类来实现这一点：


函数btn（）{
$（'#textbox_id'）.removeClass（'hiddenpocholder'）；
$（'#textbox_id'）.addClass（'占位符'）；
}
.hiddenpocholder:：-webkit输入占位符{
不透明度：0；
}
.Placeholder:：-webkit输入占位符{
不透明度：1；
}

点击我谢谢，有用。我稍微修改了它（添加了淡入度，并使它从0开始）@PatrikFröhler很乐意帮忙