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 = "thing ".Так ты бы сказал,Я думаю, что это лучший ответ, поскольку Jquery не нужен для этого.

Answer 3

Я бы предложил использовать плагин вроде labelOver вместо того, чтобы возиться с текстом и стилем ввода!

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

Answer 4

http://api.jquery.com/css

Используйте .css(), чтобы добавить стиль color к вашему input