Использование jQuery для изменения ввода текста HTML на ввод пароля - PullRequest
Новая
       15

Использование jQuery для изменения ввода текста HTML на ввод пароля

2 голосов
/ 25 августа 2011

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

Когда пользователь щелкает это поле, т. Е. Когда фокус установлен на это текстовое поле, я хотел бы изменить тип ввода на пароль.

Я пробовал это с помощью jQuery, но без радости: 

$("#passwordtxt").click(function(e){
    e.stopPropagation();
    if($("#passwordtxt").val() == "Password"){    
      $("#passwordtxt").val("");      
    }
    $("#passwordtxt").attr('type','password');
});

Вот HTML-код, к которому он относится: 

<form name = "loginform" action = "get_login.php" method = "post">
   <input id = "emailtxt" name = "username" type="text" size="25" value = "E-mail"/>
   <input id = "passwordtxt" name = "password" type="text" size="25" value = "Password"/>                                    
</form>

РЕЗУЛЬТАТ: он не меняет тип на пароль, он просто остается текстовым ...

Ответы [ 6 ]

4 голосов
/ 25 августа 2011

Лучшим решением было бы использовать свойство placeholder, которое будет достигать именно того, что вы хотите, не беспокоясь об изменении типа поля ввода.

в противном случае вы захотитеобращаться к свойству как к свойству, а не как к атрибуту, используя: 

.prop("type", "password");
2 голосов
/ 25 августа 2011

Это не возможно напрямую.В jQuery даже есть собственное встроенное сообщение об ошибке: 

jQuery.error( "type property can't be changed" );

Вместо этого у вас может быть другой элемент (один пароль) с точно такой же позицией и размером.Ввод видимый, а пароль изначально нет.Затем вы можете переключаться между ними: 

$('#input, #password').toggle();

Удостоверьтесь, что пароль сфокусирован на один.

http://jsfiddle.net/pimvdb/mqq4z/

2 голосов
/ 25 августа 2011

Посмотрите на атрибут-заполнитель HTML5, который может достичь этого эффекта. 

<input type="password" placeholder="Password" />

Возможно, вам придется искать запасные варианты, если вы хотите поддерживать старый IE.

0 голосов
/ 25 августа 2011

Как и предполагалось, вы должны использовать placeholder и плагины, чтобы заставить его работать в IE. При этом, если вы все еще хотите изменить тип input и не нуждаетесь в поддержке IE, вы можете сделать это с помощью метода prop в jQuery: 

$("#passwordtxt").prop("type", "password");
0 голосов
/ 25 августа 2011

Использование атрибута HTML5 placeholder позволит это сделать.Например: 

<input type = "password" placeholder = "Password" />

Для поддержки клиентов, не поддерживающих HTML5, потребуется решение javascript / jQuery.

0 голосов
/ 25 августа 2011

Вы не можете изменить type элемента input с помощью jQuery. Причина в том, что это невозможно в Internet Explorer, поэтому jQuery не позволяет вам делать это в любом браузере (так как он предназначен для улучшения кросс-браузерной совместимости и всего такого).

Посмотрите на .attr() документы :

Примечание: jQuery запрещает изменять атрибут типа в или элемент и будет выдавать ошибку во всех браузерах. Это потому что атрибут типа не может быть изменен в Internet Explorer.

Одним из возможных решений вашей проблемы может быть наложение текста (в span или div или как вам на самом деле нравится) на ввод type="password" и скрытие текста на focus.

...