Текст водяного знака для поля пароля

Question

У меня есть одно поле пароля на странице. Я хочу отобразить текст водяного знака «Введите пароль» в поле пароля на экране, перед вводом пароля он отображает текст в виде типа пароля. Как мы можем решить эту проблему с помощью JavaScript?

Answer 1

Самый простой способ - использовать плагин jQuery, который позволяет добавлять водяные знаки для полей пароля. Я придумал этот плагин , чтобы быстро выполнить поиск в Google.

Если вы не хотите использовать плагин jQuery, вам понадобятся 2 HTML-ввода, один видимый и один скрытый. Скрытое содержит фактическое значение, которое вы хотите передать обратно на сервер, а видимое - это то, которое вы манипулируете с помощью javascript, и пользователь взаимодействует с ним. Следующая часть состоит в том, чтобы манипулировать двумя входами вместе. Вот важные части, для которых я могу придумать код:

• Когда ваш видимый пароль пуст, измените его тип на текстовый. и отображать водяной знак, но оставить скрытый ввод пустым.
• Если пользователь выделяет фокус, скрыть водяной знак и переключиться обратно на пароль.
• По мере ввода копируйте значение в скрытое поле.
• Если они покидают поле ввода и текст отсутствует, переключите тип обратно на текст и показать водяной знак снова.

Попробуйте либо подключить плагин, либо кодировать javascript самостоятельно, и дайте мне знать, как оно работает.

Answer 2

Если вам нужна только поддержка новых браузеров, вы можете использовать атрибут placeholder на входе.

<input type="password" placeholder="Insert Password" />

Или, если вам нужно установить его в сценарии, просто выполните

input.placeholder =​​​​​​​ "Insert Password";

См. http://jsfiddle.net/xECqY/.

Answer 3

Таким образом, приведенный ниже код представляет собой простую маску jQuery для обычного поля ввода. Но это не будет работать для поля пароля, потому что буквы замаскированы! Так что это заставляет меня задуматься о двух способах его расширения. Можно было бы написать функцию маскировки самостоятельно. Поэтому используйте обычное поле ввода, но маскируйте символы по мере их ввода. Другой вариант - наложить обычное текстовое поле на поле пароля и затем либо скрыть его, либо изменить z-порядок при нажатии. Я знаю, что вы только что сказали в комментариях, что не используете jQuery, но я оставляю это для другие. Извините, у меня нет кода для вашего варианта использования!

/* Newsletter Sign Up Functions*/
    /* Toggle field descriptions as they are clicked in and out of */
    //set default input values because Firefox is stupid and doesn't reset them
    $("#newsletterform input[name=first]").val('First Name');
    $("#newsletterform input[name=last]").val('Last Name');
    $("#newsletterform input[name=email]").val('E-mail Address');

    //store default input values
    $("#newsletterForm input:text").each(function() {
        $.data(this, "initialval", $(this).val());
    });
    //clear values on focus
    $("#newsletterForm input:text").focus(function() {
        if ($.data(this, "initialval") == $(this).val()) { $(this).val(""); }
    });
    //restore value on lost focus
    $("#newsletterForm input:text").blur(function() {
        if ($(this).val() == "") { $(this).val($.data(this, "initialval")); }
    });
    /* End toggle field descriptions */

Answer 4

Этот плагин jQuery активно поддерживается и обрабатывает новые поля ввода HTML5: http://code.google.com/p/jquery-watermark/

Answer 5

Вы обязательно должны попробовать функцию водяного знака jQuery, напр.http://code.google.com/p/jwatermark/