color of placeholder span on input focus

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?

---

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.

---

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();

链接地址: http://www.djcxy.com/p/70504.html

上一篇: 使用jquery将HTML文本和背景颜色添加到html表单中

下一篇: 输入焦点上占位符的颜色