Блог

Главная - Вопросы по программированию - Отключить маскировку пароля в поле пароля

Отключить маскировку пароля в поле пароля

#javascript #jquery #html #forms

#javascript #jquery #HTML #формы

Вопрос:

Я хочу создать подсказки для полей формы, где значение по умолчанию показывает «Пароль», и при фокусировке оно исчезает. Если поле потеряет фокус при неиспользованном вводе, оно вернет значение по умолчанию «Пароль».

Проблема: значение по умолчанию для поля пароля также маскируется. Как я могу показать значение по умолчанию ‘Password’ без маскировки и маскировать только пользовательский ввод?

Код jQuery

 $(".splash_register_short_input, .splash_register_long_input").each(function() {
    $(this).val( $(this).attr('title') );
});

$(".splash_register_short_input, .splash_register_long_input").focus(function() {
    if($(this).val() == $(this).attr('title')) {
        $(this).val('');
    }
});

$(".splash_register_short_input, .splash_register_long_input").blur(function() {
    if($(this).val() == '') { // If there is no user input
        $(this).val($(this).attr('title'));
        $(this).removeClass('splash_register_have_userinput');
    } else {    // If there is user input
        $(this).addClass('splash_register_have_userinput');
    }
});

HTML-код

 <form id="splash_register_traditional_form">
    <input type="text" name="register_first_name" class="splash_register_short_input" title="First Name" /><label for="register_first_name"></label>
    <input type="text" name="register_last_name" class="splash_register_short_input" title="Last Name" /><label for="register_last_name"></label>
    <input type="text" name="register_email" class="splash_register_long_input" title="Email" /><label for="register_email"></label>
    <input type="password" name="register_password" class="splash_register_long_input" title="Password" /><label for="register_password"></label>
    <input type="submit" id="splash_register_signup_button" value="Sign up" />
</form>

Ответ №1:

Вы можете просто использовать HTML5 placeholder -атрибут:

 <input type="password" placeholder="Enter Password..." />

Что касается отсутствия обратной совместимости, как упоминалось в комментариях, этот плагин-заполнитель jQuery в сочетании с каким-то резервным механизмом на случай, если атрибут не поддерживается (как, возможно, этот), может быть полезным.

Комментарии:

1. Поддерживаю стандартное, простое решение. Однако это вообще не имеет обратной совместимости, поэтому не очень надежно.

2. Да, я думаю, что IE10 наконец добирается до поддержки этого самого потрясающего атрибута. У всех остальных это уже есть, вздох..

3. Это не должно иметь значения, если вы использовали метки . «Поврежденное» поле по-прежнему является гораздо лучшим вариантом, чем использование javascript для реализации демаскировки поля пароля.

Ответ №2:

Лучшим способом сделать это было бы установить значение по умолчанию не как значение поля пароля, а как наложение на поле пароля, которое исчезает при фокусировке или когда пользователь изменяет значение на что-то другое. Вы можете использовать существующие плагины jquery для встроенных меток полей, например

http://www.viget.com/inspire/a-better-jquery-in-field-label-plugin/
http://fuelyourcoding.com/scripts/infield/
http://www.kryogenix.org/code/browser/labelify/

Ответ №3:

Чтобы скрыть пароль программно, добавьте эту строку ниже в create android.provider.Настройки.System.putInt(this.getContentResolver(), android.provider.Настройки.Система.TEXT_SHOW_PASSWORD, 0);