программно изменить тип текстового поля с type ='text' на type = 'password'

#javascript #validation

#javascript #проверка

Вопрос:

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

мне удалось сделать это достаточно легко с помощью кода javascript, но он не хочет работать в IE.

 <input id="username" class="username" name="u" type="text" value="username" onclick="if(this.value='username') {this.value=''};" />
<input id="password" class="password" name="p" type="text" value="password" onclick="if(this.value='password') {this.value=''; this.type='password'};" />

1. Можете ли вы опубликовать свои примеры кодов?

2. Предполагая, что у вас все получится (из одного из ответов ниже), вам также следует изменить триггер с onclick на onfocus , чтобы учесть, когда пользователь переключается между полями, а не использует мышь.

3. Разве условие не должно гласить «==» (вместо «=»)?

Ответ №1:

Допустим, ваш html-код выглядит следующим образом

 <input type="text" id="txtId" />

вы можете заменить его с помощью Jquery,

 $('#txtId').replaceWith('<input type="password" id="txtId" />')

Ответ №2:

IE позволяет задать тип input элемента только один раз, при создании элемента. Попытки установить его после этого завершатся неудачей.

Если вы хотите «изменить» элемент в IE, то вам, скорее всего, нужно будет создать другой элемент с теми же атрибутами (за исключением типа, конечно) и заменить им существующий элемент.

Или создайте фиктивное текстовое поле для пароля и спрячьте реальное поле пароля — при фокусировке фиктивное поле должно скрывать себя и показывать и фокусироваться на реальном поле пароля.

Ответ №3:

Не могли бы вы рассмотреть возможность использования jQuery?

 $("[name=fieldname]").attr("type", "password");

1. да, я был бы рад использовать jquery, но проблема, с которой я сталкиваюсь, заключается в том, что это изменит тип поля во всем, кроме IE

2. (1) «Использовать jQuery» не всегда является ответом. (2) Это специфичная для IE проблема. IE не позволит вам изменить атрибут «type» после его установки.

3. Э-э .. Вы могли бы попробовать заменить все поле вместе полем пароля при нажатии на него? Также — хотя «Использовать jQuery» не всегда является ответом, часто это решение; хорошая отправная точка.

Ответ №4:

Вот функция для замены любого элемента формы паролем с тем же значением, зная его идентификатор:

 function replaceWithPassword(id)
{
    var o = $('input#'   id   ', textarea#' id   ', select#' id);
    o.replaceWith('<input type="password" value="'   o.val()   '" id="'   id   '" />');
}

Ответ №5:

Это сработало для меня, Поместив это в раздел head

 function changeBack()
 {
     if(document.getElementById('smsl_pw').value=='')
     {
        document.getElementById('smsl_pw').type='text';
        document.getElementById('smsl_pw').value='Password';

     }

 }

 function changePass()
 {
    document.getElementById('smsl_pw').type='password'; 
    document.getElementById('smsl_pw').value='';

 }

Вот поле ввода
<input id="smsl_pw" onclick="changePass();" onblur="changeBack();" name="smsl_pw" type="text" value="Password">

Надеюсь, это кому-то поможет