jQuery：用户开始输入后更改输入值的颜色

Question

我有一个表单输入，其中包含示例搜索关键字。

当用户聚焦输入时，文本消失，如果输入中没有任何内容，则当未聚焦时，文本会重新出现。

一切都很好，而且效果很好，但是我想做的是使示例文本变灰，然后在用户实际键入时具有正常的纯色。

以下是我当前正在使用的代码。 任何帮助将是巨大的！

$(function() {
$('input').each(function() {
    $.data(this, 'default', this.value);
}).focus(function() {
    if (!$.data(this, 'edited')) {
        this.value = "";
    }
}).change(function() {
    $.data(this, 'edited', this.value != "");
}).blur(function() {
    if (!$.data(this, 'edited')) {
        this.value = $.data(this, 'default');
    }
});
});

Answer 1

像这样？

$(function() {
    $('input').each(function() {
        $.data(this, 'default', this.value);
    }).css("color","gray")
    .focus(function() {
        if (!$.data(this, 'edited')) {
            this.value = "";
            $(this).css("color","black");
        }
    }).change(function() {
        $.data(this, 'edited', this.value != "");
    }).blur(function() {
        if (!$.data(this, 'edited')) {
            this.value = $.data(this, 'default');
            $(this).css("color","gray");
        }
    });
});

http://jsfiddle.net/afcpb/

只需简单地将其初始设置为灰色，然后在聚焦时将其设置为黑色，如果再次设置默认文本即可将其设置为灰色。

Answer 2

HTML5中有placeholder =“ something”属性。 因此，您会说，<input type =“ text” placeholder =“ something” />，我认为这是最好的答案，因为不需要使用Jquery即可。

Answer 3

http://api.jquery.com/css

使用.css()为您的input添加color样式

Answer 4

我建议使用类似labelOver的插件，而不要弄乱输入的文本和样式！

http://remysharp.com/2007/03/19/a-few-more-jquery-plugins-crop-labelover-and-pluck/#labelOver