Последующий вопрос о фокусе ввода и размытии

Question

Я уже задавал вопрос сегодня: Этот

Теперь у меня есть код, который работает, но работает только в FF (полностью) и частично в IE (7 и 8).

function replaceT(obj){
     var newO=document.createElement('input');
     newO.className = obj.className;
     newO.style.width = '118px';
     newO.style.height = '17px';
     newO.style.color = '#666';
     newO.setAttribute('maxlength','30');
     newO.setAttribute('type','password');
     newO.setAttribute('onblur','this.value=\'Password\'; this.type=\'text\'');
     newO.setAttribute('onfocus','this.value=\'\'; this.type=\'password\'');
     newO.setAttribute('tabindex','2');
     newO.setAttribute('value','');
     newO.setAttribute('id','password_property_input');
     newO.setAttribute('name',obj.getAttribute('name'));
     obj.parentNode.replaceChild(newO,obj);
     newO.focus();
}

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

Теперь, когда я щелкаю за пределами этого ввода (onblur), я получаю, что тип поля снова изменяется на текст, и значение восстанавливается в Пароль. И если снова нажать на поле (onfocus), мой тип ввода текста снова станет паролем, и значение вернется к ''.

Это отлично работает в FF, но ничего из этого не работает в IE, когда я говорю «нет», я имею в виду onblur и onfocus. Первая смена текста на ввод пароля работает. Спасибо за любые ответы

Я нашел даже лучшее решение, но оно также не работает в IE:

Внутри window.load добавлена ​​функция:

applyPasswordType(document.getElementById('password_property_input'), 'Password', 'text');

и сама функция ..

function applyPasswordType(elem, val, typ) {
      elem.value = val;
      elem.type = typ;
      elem.onfocus = function() {
        if(this.value == val) {
          this.style.color = '';
          this.type = 'password'; //If in focus, input type will be 'password'
          this.value = '';
        }
      }

      elem.onblur = function() {
         if(this.value == '') {
           this.value = val;
           this.type = 'text'; //On blur, input type will be 'text' in order to show value
         }
       }
     }

Я все еще пытаюсь выяснить, как это исправить с помощью addeventlistener ..

Answer 1

setAttribute не работает в IE, не используйте его.

Используйте свойства напрямую:

foo.onevent = function () { ... }

Еще лучше, используйте addEventListener / attachEvent

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