Zmiana koloru tekstu zastępczego na fokusem przy użyciu JavaScript

Question

Próbuję zmienić kolor tekstu zastępczego na biały przy fokusie. Możesz przejrzeć formularz kontaktowy here.

Próbowałem już różnych kodów CSS, ale większość kodu nie wygląda tak samo w różnych przeglądarkach + Zrobiłem kilka badań, a teraz widzę, że są pewne ograniczenia jeśli chodzi o stylizowanie elementów zastępczych za pomocą CSS.

Moje pytanie brzmi: czy mogę zmienić kolor zastępczy na biały przy fokusowaniu za pomocą JavaScript? Nie jestem tak obeznany z pisania JavaScript, ale byłby wdzięczny za każdą pomoc

Answer 1

uwierzyć, że trzeba prefiksy dostawców (od css-tricks.com):

::-webkit-input-placeholder { 
    color: red; 
} 

:-moz-placeholder { /* Firefox 18- */ 
    color: red; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    color: red; 
} 

:-ms-input-placeholder { 
    color: red; 
} 

użyciu JavaScript można byłoby zastosowanie tylko stylizacja (podobny przy użyciu prefiksów dostawcy) programowo w przypadku fokusa.

Edycja: W rzeczywistości te style nie sądzę, mogą być stosowane przy użyciu javascript. Będziesz musiał utworzyć klasę i zastosować ją przy pomocy js.

CSS:

input.placeholderred::-webkit-input-placeholder { 
    color: red; 
} 

JQuery:

var $textInput = $('#TextField1'); 
$textInput.on('focusin', 
    function() { 
     $(this).addClass('placeholderred'); 
    } 
); 

$textInput.on('focusout', 
    function() { 
     $(this).removeClass('placeholderred'); 
    } 
); 

JS:

var textInput = document.getElementById('TextField1'); 
textInput.addEventListener('focus', 
    function() { 
     this.classList.add('placeholderred'); 
    } 
); 

textInput.addEventListener('blur', 
    function() { 
     this.classList.remove('placeholderred'); 
    } 
); 

i uprzejmości z najbardziej pomocnym Armfoot, ryba: http://jsfiddle.net/qbkkabra/2/

Answer 2

Ta wola pracować z wi th tylko css i html

CSS

input::-webkit-input-placeholder { 
color: #999; 
} 
input:focus::-webkit-input-placeholder { 
color: red; 
} 

/* Firefox < 19 */ 
input:-moz-placeholder { 
color: #999; 
} 
input:focus:-moz-placeholder { 
color: red; 
} 

/* Firefox > 19 */ 
input::-moz-placeholder { 
color: #999; 
} 
input:focus::-moz-placeholder { 
color: red; 
} 

/* Internet Explorer 10 */ 
input:-ms-input-placeholder { 
color: #999; 
} 
input:focus:-ms-input-placeholder { 
color: red; 
} 

i html

<input type='text' placeholder='Enter text' />