Изменить непрозрачность заполнителя на вкладке?

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>

Answer 2

Вы можете достичь этого путем перехода из класса в текстовом поле: 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>