Question

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

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

＆＃13;

function btn() {
  $('#textbox_id').toggleClass("myClass");
}

＆＃13;

.myClass::-webkit-input-placeholder {
  opacity: 0;
  -webkit-transition: opacity 1s linear;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以通过在文本框中切换一个类来实现此目的：New Fiddle

＆＃13;

function btn() {
  $('#textbox_id').removeClass('hiddenPlaceholder');
  $('#textbox_id').addClass('Placeholder');
}

＆＃13;

.hiddenPlaceholder::-webkit-input-placeholder {
  opacity: 0;
}
.Placeholder::-webkit-input-placeholder {
  opacity: 1;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: