Изменение типа поля ввода с помощью jQuery (текст → пароль)

Я пытаюсь изменить тип ввода, особенно после нажатия на изменение ввода type = "text", чтобы изменить = "пароль" .

Я не знаю почему, но я не могу добавить параметр type = "password" как атрибут для ввода.

        $('input#id_reg_pass').removeAttr("type"); #this works, type="text" is removing
        $('input#id_reg_pass').attr('type', 'password'); #problem, this not works
        $(this).addClass('exampleText').val($(this).attr('title'));

Неужели у кого-то подобная проблема? Я буду рад за каждый намек... Спасибо вам

Ответ 1

Если вы используете jQuery 1.6, используйте .prop:

$('input#id_reg_pass').removeAttr("type");
$('input#id_reg_pass').prop('type', 'password');
$(this).addClass('exampleText').val($(this).attr('title'));

Демо: http://jsfiddle.net/z8Rj3/

Ответ 2

Вы не можете изменить атрибут type после добавления элемента в DOM, если вы хотите, чтобы он работал одинаково во всех браузерах, см. this и this.

Как и в Microsoft Internet Explorer 5, свойство type является read/write-once, но только тогда, когда входной элемент созданный с помощью метода createElement и до того, как он будет добавлен в документ.

Ответ 3

У меня была точно такая же проблема, я хотел показать текст в поле пароля, пока пользователь не щелкнул по нему. Я сделал другой подход, вместо этого попытался изменить тип поля, я скрою его и показал новое текстовое поле, а затем вызвал focus(). Он отлично работает.

$("#password_fake").focus(){
    $(this).hide();
    $("#password").show().focus();
}

где #password_fake - текстовое поле и #password поле пароля со стилем = "display: none".

Ответ 4

Ваш код вызывает ошибку для меня, type property can't be changed. Интересно, однако, следующий код действительно работает для меня в Chrome по крайней мере:

$('input#id_reg_pass')[0].type = 'password';

Возможно, это не работает в кросс-браузере, что объясняет, почему jQuery не позволяет это (Как отметил Никлас, это так). В качестве альтернативы вы можете создать новый <input> с теми же атрибутами и заменить его старым.

Ответ 5

Попробуйте эту демо здесь

$(document).delegate('input[type="text"]','click', function() {
    $(this).replaceWith('<input type="password" value="'+this.value+'" id="'+this.id+'">');
}); 
$(document).delegate('input[type="password"]','click', function() {
    $(this).replaceWith('<input type="text" value="'+this.value+'" id="'+this.id+'">');
});