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

After realizing my original solution wouldn't work, I spent a while trying to come up with a working solution just out of curiosity. I'd still recommend using the jQuery plugin eKek0 recommended, since it degrades better, though.

The following example is fairly flexible. Rather than hard-coding the replacement tags as strings, the replacement tags are derived from the original tags. This helps if the tag attributes are altered, since you won't lose any styling or other attributes given to the tags.

The following solution has been tested in Chrome, Firefox, IE8, and IE8 in IE7 compatibility mode.

$(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); 
});

This code replaces the with the appropriate type on blur and focus. It also adds/removes a class for styling the "password" placeholder text so it is more usable, since the placeholder "password" text is not the default black color, which could potentially be misleading to a user.

You can see it working here: http://jsbin.com/azugu

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

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

Why not just change the attribute and wipe out the value?

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

Почему бы вам просто не поместить 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
        ;
    })
;

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

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

Я сделал нечто подобное. Если вы настроены на использование javascript, это можно сделать следующим образом:

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

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

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

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

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

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

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

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

Существует также плагин txReplaceFormPassword , созданный Симоной Липполисом.