«Пароль» отображается как «********» в IE для заполнителя

Question

Я использую заполнитель HTLM5 и добавил modernizr.js, чтобы он работал в IE.Сегмент кода:

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

function hasPlaceholderSupport() {
   var input = document.createElement('input');
   return ('placeholder' in input);
}


$(document).ready(function(){
    if(!Modernizr.input.placeholder){ 

        $('[placeholder]').focus(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
                input.removeClass('placeholder');
            }
        }).blur(function() {
            var input = $(this);
            if (input.val() == '' || input.val() == input.attr('placeholder')) {
                input.addClass('placeholder');
                input.val(input.attr('placeholder'));
            }
        }).blur();
        $('[placeholder]').parents('form').submit(function() {
            $(this).find('[placeholder]').each(function() {
                var input = $(this);
                if (input.val() == input.attr('placeholder')) {
                    input.val('');
                }
            })
        });

    }
});

Он отлично работает для другого браузера, и я хочу отобразить текст для input type password в IE, но вместо этого он помещает заполнитель в маскирующие символы.Как можно отобразить текст "Password".

Answer 1

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

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

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

Существует целая куча доступных скриптов, которые делают именно это - этот, например (но есть и много других).

Другой вариант - динамически изменять тип поля с password на text и обратно при каждом переключении заполнителя. Это может быть более быстрой победой, чтобы вписаться в ваш существующий код, но я бы рекомендовал использовать другую технику вместо этого в долгосрочной перспективе.

Надеюсь, это поможет.

Answer 2

Попробуйте использовать этот код ... Надеюсь, он вам поможет.

/* <![CDATA[ */
$(function () {
  var input = document.createElement("input");
  if (('placeholder' in input) == false) {
    $('[placeholder]').focus(function () {
      var i = $(this);
      if (i.val() == i.attr('placeholder')) {
        i.val('').removeClass('placeholder');
        if (i.hasClass('password')) {
          i.removeClass('password');
          this.type = 'password';
        }
      }
    }).blur(function () {
      var i = $(this);
      if (i.val() == '' || i.val() == i.attr('placeholder')) {
        if (this.type == 'password') {
          i.addClass('password');
          this.type = 'text';
        }
        i.addClass('placeholder').val(i.attr('placeholder'));
      }
    }).blur().parents('form').submit(function () {
      $(this).find('[placeholder]').each(function () {
        var i = $(this);
        if (i.val() == i.attr('placeholder'))
          i.val('');
      })
    });
  }
});
/* ]]> */