Yer tutucu metnin rengiyle değiştirme JavaScript'in odak noktası

Question

Yer tutucu metnin rengini odakta beyaz olarak değiştirmeye çalışıyorum. İletişim formunu görüntüleyebilirsiniz here.

Farklı CSS kodları denedim, ancak kodun çoğu farklı tarayıcılarda aynı görünmüyor + Biraz araştırma yaptım ve şimdi bazı sınırların olduğunu görebiliyorum. CSS ile yer tutucuları şekillendirme söz konusu olduğunda.

Sorum şu ki, JavaScript ile odakta yer tutucu rengini beyaza dönüştürebilir miyim? Ben JavaScript yazma çok aşina değilim ama

Answer 1

Eğer satıcı (css-tricks.com itibaren) önekleri ihtiyaç Believe herhangi bir yardım takdir ediyorum: Yalnızca benzer stil uygulamak olacağını javascript kullanarak

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

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

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

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

(satıcı öneklerini kullanarak) programlı olarak bir odak olayında.

Düzenleme: Aslında bu stillerin javascript kullanılarak uygulanamayacağını düşünüyorum. Bir sınıf oluşturmanız ve bunu js kullanarak uygulamanız gerekir.

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

Ve en yararlı, Armfoot nezaketi, keman: http://jsfiddle.net/qbkkabra/2/

Answer 2

Bu irade wi çalış inci sadece css ve 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; 
} 

ve html

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