Как изменить ввод с текста на пароль и наоборот?

Question

Если вы посетите этот сайт , вы увидите, что тип ввода Senha text. Но когда я что-то набираю, оно меняется на Password.

Когда я щелкаю, он сохраняет мой ввод и поддерживает его тип как Password.

Однако, если текст отсутствует и я щелкаю, он возвращается к text.

Можете ли вы объяснить, как я могу легко достичь чего-то подобного? Это очень хорошо с точки зрения UX.

Я использую последнюю версию jQuery.

Answer 1

Вам необходимо заменить элемент, например:

http://jsfiddle.net/YEHFe/

Answer 2

Безопасность браузера не позволяет вам напрямую изменять тип ввода.Однако вы можете использовать replaceWith для замены ввода типом пароля:

$("#input1").replaceWith($("<input>").attr({ "type" : "password", "id" : "input1" }));

Протестировано, и оно работаетВот jsFiddle .

Answer 3

У меня в iOS Safari сработало следующее:

$(function() {
    $('#tb').keypress(function() {
        $(this).prop('type', 'password');
    }).blur(function() {
        if ($(this).val() === '')
            $(this).prop('type', 'text');
    });
});

jsFiddle: http://jsfiddle.net/unwJh/5/

Работает ли оно в других браузерах?

Answer 4

Самый простой способ - использовать HTML5-текст-заполнитель . Но это может иметь некоторые непреднамеренные визуализации при применении к полям пароля в некоторых браузерах, и даже не работает в IE до IE9. Поэтому для согласованности между браузерами я бы использовал для этого плагин jQuery:

http://plugins.jquery.com/project/html5placeholder

Тогда вам вряд ли придется что-либо делать. В HTML-коде вы устанавливаете обычное текстовое поле для пароля, но с заполнителем, например:

<input type="password" placeholder="Senha">

В javascript (после включения выше подключаемого модуля jQuery) вы можете просто активировать его:

$('input').placeholder();

Но, если вы хотите использовать традиционный метод (или если вышеописанный метод не работает для вас по какой-то причине), вы можете просто заменить поле пароля обычным текстовым полем, как требуется. Вы настроили бы свой HTML таким образом, с видимой подсказкой и скрытым фактическим полем:

<input id="password-field" type="password" name="password" style="display: none;">
<input id="password-prompt" type="text" value="Senha">

Тогда, jquery, чтобы поменять его:

// This makes the password field show up when you focus on the prompt,
// and changes focus to the password field
$('#password-prompt').focus(function() {
    $(this).hide();
    $('#password-field').show().focus();
});

// This makes the prompt re-appear when you lose focus on the password field,
// but only if it's still empty (if you typed anything in, it leaves it as is)
$('#password-field').blur(function() {
    if ($(this).val() == '') {
        $(this).hide();
        $('#password-prompt').show();
    }
});