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 an example of my field.

http://jsfiddle.net/Vbnj2/

What’s the best way to do that?

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.