Согласно моему названию, как реализовать onfocus и onblur в поле пароля? Значение по умолчанию - пароль (читаемый), и когда мы щелкаем поле пароля, оно возвращается в формат пароля.

Вот пример, я не хочу видеть "●●●●●●●●", а "Пароль" вместо

<input type="password" name="password" value="password" onfocus="this.value=(this.value=='password') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'password' : this.value;" />

Обновить

В результате поиска Google я обнаружил Динамическое изменение типа ввода но код слишком длинный. Может быть, JQuery может сделать его короче.

2
kampit 18 Июл 2010 в 16:22

3 ответа

Лучший ответ

У вас будут проблемы в Internet Explorer, если вы попытаетесь использовать 1 поле, потому что IE не позволит вам изменить type поля.

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

Вам нужно что-то вроде этого (используя jQuery):

<input type="text" id="fakeemail" value="email@domain.com"/>
<input type="password" id="realemail" value="" name="email" style="display:none;"/>

$('#fakeemail').focus(function(){
  $(this).hide();
  $('#realemail').show().focus();
});
$('#realemail').blur(function(){
  if(this.value == ''){
    $(this).hide();
    $('#fakeemail').show();
  }
});  
4
scunliffe 18 Июл 2010 в 18:37

Изменить атрибут type динамически :

<input type="text" name="email" value="email@domain.com" onfocus="this.value=(this.value=='email@domain.com') ? '' : this.value;this.type='password';" onblur="this.value=(this.value=='') ? 'email@domain.com' : this.value;this.type='text';" />

(Я предлагаю вам сделать это с помощью скрипта вместо встроенного).

1
tcooc 18 Июл 2010 в 12:27

Вы можете попробовать использовать jQuery и перемещать метки полей с помощью позиционирования CSS. Проверьте реализацию этого парня: http://graphicpush.com/ более доступные входы - предварительно заполненный текст - с - JQuery

Сайт, на который он ссылается, также имеет хороший эффект затухания на полях ввода в фокусе (но его реализация немного лучше, чем та, на которую он ссылается).

0
hollsk 18 Июл 2010 в 12:42