Вход с водяным знаком (css & JQuery)

JS

$(document).ready(function () {
    $(":input[data-watermark]").each(function () {
        $(this).val($(this).attr("data-watermark"));
        $(this).bind('focus', function () {
            if ($(this).val() == $(this).attr("data-watermark")) $(this).val('');
        });
        $(this).bind('blur', function () {
            if ($(this).val() == '') $(this).val($(this).attr("data-watermark"));
            $(this).css('color','#a8a8a8');
        });
    });
});

HTML

<label>Name: </label>
<input class="input" type="text" name="name" maxlength="" data-watermark="My Name" />

CSS

.input{
    width:190px;
    height:16px;
    padding-top:2px;
    padding-left:6px;
    color:#000;
    font-size: 0.688em;
    border:#8c9cad 1px solid;
}

То, что я хотел бы исправить, заключается в том, что всякий раз, когда водяные знаки имеют значение ввода, цвет текста должен быть серый (#a8a8a8). И когда значение - это то, что пользователь пишет, тогда цвет должен быть черным.

Это скрипка: http://jsfiddle.net/qGvAf/

Ответы

Ответ 1

$(document).ready(function () {
    $(":input[data-watermark]").each(function () {
        $(this).val($(this).attr("data-watermark"));
        $(this).css("color","#a8a8a8");
        $(this).bind("focus", function () {
            if ($(this).val() == $(this).attr("data-watermark")) $(this).val('');
            $(this).css("color","#000000");
        });
        $(this).bind("blur", function () {
            if ($(this).val() == '') 
            {
                $(this).val($(this).attr("data-watermark"));
                $(this).css("color","#a8a8a8");
            }
            else
            {
                $(this).css("color","#000000");
            }
        });
    });
});

Ответ 2

Ваше желаемое поведение "Вход с водяным знаком" уже сделано - оно называется атрибутом placeholder. Это работает в современных браузерах.

Для старых браузеров вы должны использовать jQuery plugin для эмуляции placeholder для вас.

Наконец, чтобы установить цвет, вам нужен CSS, похожий на этот:

.placeholder {
    color: #a8a8a8;
}
::-webkit-input-placeholder {
    color: #a8a8a8;
}
:-moz-placeholder {
    color: #a8a8a8;
}

К сожалению, вы не можете комбинировать приведенные выше правила; он не будет работать.

Ответ 3

Не переопределяйте существующее значение

У меня возникла небольшая проблема с этим приятным решением, но с небольшими изменениями, как бы поделиться им.

Просто добавьте оператор if в строку 3, чтобы предотвратить переопределение загруженного значения.

$(document).ready(function () {
    $('.watermark').each(function () {
    // add the line below
        if (this.value == '') {
            $(this).val($(this).attr("data-watermark"));
            $(this).css("color", "#a8a8a8");
            $(this).bind("focus", function () {
                if ($(this).val() == $(this).attr("data-watermark"))         
                $(this).val('');
                $(this).css("color", "#000000");
            });
            $(this).bind("blur", function () {
                if ($(this).val() == '') {
                    $(this).val($(this).attr("data-watermark"));
                    $(this).css("color", "#a8a8a8");
                }
                else {
                    $(this).css("color", "#000000");
                }
            });
    // Don't forget the closing bracket
        }
    })
});

Надеюсь, что это полезно.