Change font-color of placeholder span on input focus

Question

I have an input field with a span placeholder inside of it. What I\'d like to do is change the color of the placeholder when the input field is clicked. Here is a jsFiddle with

Answer 1

You can use a selector for the input element and then grab the previous span. Add a class that affects the color. On blur remove the class.

http://jsfiddle.net/Vbnj2/1/

$("span.holder + input").focus( function() {
    $(this).prev('span.holder').addClass('active');
}).blur(function() {
    $(this).prev('span.holder').removeClass('active');
});

Modern browsers have added support for the placeholder attribute. You just add placeholder="My Text" as an input attribute and the browser will automatically insert/remove it as necessary.

Answer 2

I know this is different to the way you've approached it, but if what you're trying to do is remove the holder text on focus, you could always use this here

What it does is read the text from your inputs title attribute, you set the color of the default text in your css and then when you focus/blur it adds/removes text, unless there is a value, then the users value stays there rather then the default text.

HTML

<input type="text" name="firstname" class="defaultText" title="First Name" />

CSS

input { margin: 10px; padding: 5px; }

.defaultTextActive { color: #000; }

jQuery

$(".defaultText").focus(function(srcc) {

    if ($(this).val() == $(this)[0].title) {
        $(this).removeClass("defaultTextActive");
        $(this).val("");
    }

});

$(".defaultText").blur(function() {

    if ($(this).val() == "") {
        $(this).addClass("defaultTextActive");
        $(this).val($(this)[0].title);
    }

});

$(".defaultText").blur();