Changing color of placeholder text on focus with JavaScript [closed]

Question

I'm trying to change the color of placeholder text to white on focus. You can view the contact form here.

I've tried different CSS code, but most of the code doesn't look same on different browsers + I've done some research, and I can now see that there are some limits when it comes to styling the placeholders with CSS.

My question is, can I change the placeholder color to white on focus with JavaScript? I'm not so familiar with writing JavaScript, but would appreciate any help

Answer 1

Believe you need vendor prefixes (From 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;  
}

Using javascript you would only be applying similar styling (using vendor prefixes) programmatically on a focus event.

Edit: In fact these styles I don't think can be applied using javascript. You would need to create a class and apply that using 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');
    }
);

And courtesy of the most helpful, Armfoot, a fiddle: http://jsfiddle.net/qbkkabra/2/