更改輸入焦點上占位符跨度的字體顏色

Question

我有一個帶有跨度占位符的輸入字段。 我想做的是單擊輸入字段時更改占位符的顏色。 這是一個jsFiddle，帶有我所在領域的示例。

http://jsfiddle.net/Vbnj2/

最好的方法是什么？

Answer 1

您可以為輸入元素使用選擇器，然后獲取上一個跨度。 添加一個會影響顏色的類。 模糊時，刪除該類。

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

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

現代瀏覽器增加了對placeholder屬性的支持。 您只需將placeholder="My Text"添加為輸入屬性，瀏覽器就會根據需要自動插入/刪除它。

Answer 2

我知道這與您采用的方法不同，但是如果您要刪除焦點上的所有者文本，則可以始終在此處使用

它的作用是從輸入title屬性中讀取文本，在CSS中設置默認文本的顏色，然后在進行焦點/模糊處理時添加/刪除文本，除非有值，否則用戶值會停留在該位置然后是默認文字。

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