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

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

我知道這是你走近它的方式不同，但如果你正在試圖做的是去除焦點持有人的文字，你總是可以使用this here

它做什麼是閱讀來自輸入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();