Как вы можете поменять местами вводимое текстовое поле на область пароля в фокусе в JQuery?

Question

Я хотел бы отобразить «пароль» в виде текста в области паролей, и когда поле сфокусировано, оно должно стать пустым и разрешить ввод обычного пароля (помеченный звездочкой) от пользователя.

В настоящее время я использую следующий метод. Изначально я отображаю текстовое поле с паролем, когда оно сфокусировано, оно удаляется и заменяется полем пароля. Вот jQuery:

$(document).ready(function() {
    $("#password").focus( function() {
        $("#pwd").html('<input type="password" id="password" name="password" value="" />');
        $("#password").focus();
    });
});

Это работает в Firefox и Chrome, но не работает в IE 8 (и, вероятно, в других IE), поскольку вызов фокусировки по какой-то причине не выполняется (может быть, DOM не готов?).

Демо доступно на jsbin .

Есть идеи?

Answer 1

Вы можете попробовать плагин watermarker . Я не знаю, работает ли он в IE8.

Answer 2

Поняв, что мое оригинальное решение не будет работать, я потратил некоторое время, пытаясь придумать рабочее решение просто из любопытства. Я бы по-прежнему рекомендовал использовать плагин jQuery eKek0 , так как он ухудшается лучше.

Следующий пример довольно гибкий. Вместо того, чтобы жестко кодировать теги замены <input /> в виде строк, теги замены выводятся из исходных тегов. Это помогает, если атрибуты тега <input /> изменены, поскольку вы не потеряете стили или другие атрибуты, присвоенные тегам.

Следующее решение было протестировано в Chrome, Firefox, IE8 и IE8 в режиме совместимости с IE7.

$(document).ready(function() { 

    var focusEvent = function() { 
        if(this.type == 'text') {
            var html = $(this).clone().wrap('<span></span>').parent().html();
            html = html.replace(/type=("|')?text("|')?/, 'type="password"');
            var $newPwdBx = $(html);      

            $(this).replaceWith($newPwdBx);
            $newPwdBx.removeClass('readOnly');
            $newPwdBx.val('');
            $newPwdBx.focus();
            $newPwdBx.blur(blurEvent);
        }
    };

    var blurEvent = function() { 
        if(this.value == '') { 
            var html = $(this).clone().wrap('<span></span>').parent().html();
            html = html.replace(/type=("|')?password("|')?/, 'type="text"');
            var $newTxtBx = $(html);            

            $(this).replaceWith($newTxtBx);
            $newTxtBx.addClass('readOnly');
            $newTxtBx.val('password');
            $newTxtBx.focus(focusEvent);
        } 
    };

    $("#password").focus(focusEvent); 
});

Этот код заменяет <input /> соответствующим типом размытия и фокусировки. Он также добавляет / удаляет класс для стилизации текста-заполнителя «пароль», чтобы его было удобнее использовать, поскольку текст-пароль «заполнитель» не является черным цветом по умолчанию, что потенциально может вводить пользователя в заблуждение.

Вы можете увидеть это здесь: http://jsbin.com/azugu

Answer 3

Наиболее распространенный способ добиться этого - установить фоновое изображение в поле пароля с текстом «пароль» и удалить фоновое изображение, когда оно получает фокус.

Answer 4

Я сделал что-то похожее на это. Если вы настроены на использование JavaScript, это один из способов сделать это:

• Имеет два поля ввода: обычное и пароль
• Пароль скрыт с помощью css
• Когда обычный ввод получает фокус
  • Скрыть обычный ввод
  • Показать ввод пароля
  • Обратить внимание на ввод пароля

Этот подход имеет некоторые проблемы для рассмотрения. Если кто-то отключил JavaScript или использует расширение NoScript для Firefox, он не сможет отправить форму. Если кто-то начинает печатать до загрузки javascript, возможны неожиданные результаты.

Другой подход заключается в использовании css и использовании javascript в качестве резервной копии (для IE6). Создайте изображение с текстом «Пароль». Пусть это изображение будет фоновым для поля пароля. Вы можете использовать псевдо-классы в CSS, чтобы изменить фон поля пароля для hover и. Таким образом, если у человека отключен JavaScript, форма все еще работает. Это также работает, как только загружена CSS.

CSS может выглядеть примерно так:

.pass { 
    background-image: url(/path/to/img.png);
}
.pass:hover {
    background: white;
}

При использовании jquery javascript может выглядеть примерно так:

 $( ".pass" ).hover( function() {
     $( this ).css( "background", "white" );
  };

Answer 5

Существует также этот txReplaceFormPassword плагин, разработанный Simone Lippolis.

Answer 6

Это работает в FF & IE:

$(document).ready(function() {
    $("#password").focus( function() {
        $(this)
          .after('<input type="password" id="password" name="password" value="" />')
          .remove();
        $("#password").focus();
    });
});

Answer 7

Почему бы вам просто не поставить div поверх?

var $pwd = $("#passwordBox"),
    pos = $pwd.position()
;
$pwd
    .after(  // add the div
        $('<div></div>')
            .html("Password")
            .css({
                position : "absolute",    // place it over this
                top : pos.top + "px",  // adjust as necessary
                left : pos.top + "px"
            })
    )
    .next() // select the new div
    .andSelf()
    .one('click focus', function() {
        $pwd.next().remove()    // remove the div
            .end().focus() // focus the input box
        ;
    })
;

Answer 8

Попробуйте, экспериментально, если хотите:

$(document).ready(function() {
    $(".pass").focus(function() {
        $pwInput = $('<input type="password" class="pass" name="password" value="" />');
        $(this).remove();
        $("#someDiv").append($pwInput);
    }).focus();
});

Answer 9

Почему бы просто не изменить атрибут и не уничтожить значение?

$("#password").focus( function() {
    $(this).attr('type','password');
    $(this).attr('value','');        
});