在输入焦点上更改占位符跨度的字体颜色

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