how to change placeholder color with javascript when onblur event occured?

Question

I have a login page in which there are 3 input elements. When on onblur if this element is empty i want to change the placeholder value. This changed placeholder value should be in different color(ex:red). How to achieve this?

possible duplicate of [Change an input's HTML5 placeholder color with CSS](http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) — Companjo, Mar 29 '15 at 13:13

score 1 · Answer 1 · answered Mar 29 '15 at 14:00

<input type="text" placeholder="Provide User Name" value="Provide User Name" id="UName" class="applyOnBlur  apply" />
<input type="text" placeholder="Provide Password" value="Provide Password" id="Pwd" class="applyOnBlur apply" />
<input type="text" placeholder="Provide Otp" value="Provide Otp" id="OTP" class="applyOnBlur apply  " />
<script>

    $('input.applyOnBlur').blur(function () {
        $('input.applyOnBlur').each(function (index) {
            if ($(this).val().trim() == "" || $(this).val().trim() == $(this).attr('placeholder')) {
                $(this).val($(this).attr('placeholder'));
                $(this).addClass('apply');

            }
            else {
                $(this).removeClass('apply');

            }
        });
    });
    $('input.applyOnBlur').focus(function () {
        if ($(this).val().trim() == $(this).attr('placeholder')) {
            $(this).val('');
        }
    });

</script>
<style>
    .apply
    {
        color: Red;
    }
</style>

i don't have enough reputation dheepak ji. – Siva Charan Mar 29 '15 at 16:48 — Siva Charan, Mar 29 '15 at 16:48

score 0 · Answer 2 · answered Dec 30 '16 at 09:32

(Late answer, but it still can be helpful for someone else...)

Hi,

This is my method to change color of a placeholder.

This is my CSS code:

.input-placeholder-false::-webkit-input-placeholder {
     color: #ff534f;
}

This code means: for the class "input-placeholder-false", change the color of the placeholder.

Then, you have to do this for:

::-webkit-input-placeholder /* Chrome - Opera - Safari */
::-moz-placeholder /* Firefox 19+ */
:-ms-input-placeholder /* IE 10 */
:-moz-placeholder /* Firefox 18- */

Next step, the JavaScript:

document.getElementById('your-input').className = 'input-placeholder-false';

And it will normally work perfectly for all browsers!

score -3 · Answer 3 · answered Mar 29 '15 at 13:21

-3

In General you modify each element using JavaScript like this:

    if (document.getElementById("elementname")) {
    document.getElementById("elementname").style.backgroundColor = "#FF0000"
}

"elementname" is the value of the ID property of the html element. You can also use getElementByName (but I don't use it and do not have an example)

answered Mar 29 '15 at 13:21

Herbert

151
2
12

i am not asking to change background color,i am asking to change placeholder color – Siva Charan Mar 29 '15 at 13:26
I am sorry, I really didn't read the question well. Still trying to become a helpful member of the community ... downvote is justified well. – Herbert Mar 30 '15 at 12:38

how to change placeholder color with javascript when onblur event occured?

3 Answers3