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

Question

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

Мне удалось сделать это достаточно легко с помощью кода 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'};" /> 

Answer 1

Допустим, ваш HTML-код похож на это

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

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

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

Answer 2

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

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

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

Answer 3

Рассматриваете ли вы использовать JQuery?

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

Answer 4

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

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">

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

Answer 5

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

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