JavaScriptでフォーカスしているプレースホルダテキストの色を変更する

Question

プレースホルダテキストの色をフォーカスして白に変更しようとしています。連絡先のフォームを表示することができますhere.

私はさまざまなCSSコードを試しましたが、ほとんどのコードは異なるブラウザでは同じではありません+私はいくつかの調査を行いました。プレースホルダをCSSでスタイリングすることになります。

私の質問は、JavaScriptを使用してプレースホルダの色を白色に変更することはできますか？私はJavaScriptを書くとそれほど慣れていないんだけど、任意の助けをいただければ幸いです

Answer 1

は、あなたが（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; 
} 

はあなただけ似たスタイルを適用することになるjavascriptを使用して（ベンダー接頭辞を使用して）フォーカスイベントでプログラムで実行します。

編集：実際には、私はjavascriptを使用して適用することはできないと思うこれらのスタイル。クラスを作成し、それを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'); 
    } 
); 

そして、最も有用な、Armfootの礼儀、フィドル：http://jsfiddle.net/qbkkabra/2/

Answer 2

この意志仕事ただ、CSSと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; 
} 

とhtml

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