Chrome Autofill / Autocomplete не имеет значения для пароля

Когда вы сохранили имя пользователя и пароль для какого-либо сайта, Chrome будет автозаполнять это имя пользователя и пароль, но введите тип = «пароль», вы пытаетесь получить значение для поля пароля console.log, это пустая строка, хотя там есть значение ** ****.

Если вы нажмете где-нибудь на странице no mater, где inputбудет заполнено значение.

Это пользователь / пропуск Fiddle структуры html и passwordField.valueкоманды. Его здесь нельзя увидеть, но он может быть воспроизведен на каждой странице с регистрационной формой, а имя пользователя и пароль автоматически заполняются при загрузке страницы. Если вы проверите значение поля перед щелчком в любом месте на сайте, оно будет пустым.

Это не относится к Firefox или Internet Explorer, он заполнит значение ifэлемента паролем.

Я использую 64-разрядную ОС Windows 7 Ultimate, а версия Google Chrome - 48.0.2564.97 м

Это нормальное поведение, ошибка или?

ОБНОВИТЬ:

Если вы нажмете на F5, чтобы перезагрузить страницу и проверите поле пароля, будет указано значение для пароля. Если вы нажмете кнопку перезагрузки в Chrome в левом верхнем углу, значение для поля пароля будет пустым.

javascript,html,google-chrome,

37

Ответов: 15


32 ов принято

Кажется, это ошибка в Chrome. Когда Chrome автоматически заполняет пароль при начальной загрузке страницы (но не обновляется), значение появляется в поле формы на экране, но запрос initTextEventв Javascript возвращает пустую строку. Если вы зависите от этого значения в Javascript, это не даст вам этого сделать. Как только пользователь выполняет любое другое действие на странице, например, щелкнув в любом месте страницы, значение внезапно становится видимым для Javascript.

Я на самом деле не уверен на 100%, если это ошибка, или если есть причина безопасности для этого, например, предотвращение скрытого фрейма от кражи вашего пароля, обманом браузера и его заполнением.

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


23

Рабочий ответ от 8 июля 2016 г.

Адам правильно заявил, что это ошибка (или предполагаемое поведение). Тем не менее, ни один из предыдущих ответов на самом деле не говорит, как это исправить, поэтому здесь вы можете заставить Chrome обрабатывать значение автозаполнения как реальное значение.

Несколько вещей должны произойти по порядку, и это нужно запускать только в Chrome, а не в Firefox, следовательно if.

Сначала мы сосредоточимся на элементе. Затем мы создаем новый и запускаем , который добавляется в пользовательскую строку, которую мы указываем (я использовал «@@@@@») в начале значения. Это заставляет Chrome фактически начать действовать так, как это реально. Затем мы удалим пользовательскую строку, которую мы добавили, а затем мы не фокусируемся.input.focus(); var event = document.createEvent('TextEvent'); if ( event.initTextEvent ) { event.initTextEvent('textInput', true, true, window, '@@@@@'); input.dispatchEvent(event); input.value = input.value.replace('@@@@@',''); } input.blur();INPUT


Код:

-webkit-autofil

Редактировать 10 августа 2016 года

Это работает только сейчас в Chrome на Windows и Android. Не работает в OSX. Кроме того, он прекратит работать вообще в сентябре 2016 года, согласно:

https://www.chromestatus.com/features/5718803933560832

Кроме того, я открыл билет Chromium.

https://bugs.chromium.org/p/chromium/issues/detail?id=636425

По состоянию на 12 августа член команды Chrome сказал в вышеуказанном билете, что поведение не изменится, потому что они не считают его ошибкой.

Долгосрочное предложение:

Тем не менее, нынешнее поведение было изменено с момента его первого внедрения. Пользователю больше не нужно взаимодействовать с вводом пароля для сообщения о значении. Теперь пользователю просто нужно взаимодействовать (отправлять событие мыши или клавиатуры) с любой частью страницы. Это означает, что при выполнении проверки на pageload все равно не будет работать, нажатие на кнопку отправки приведет к тому, что Chrome правильно сообщит значение пароля. В то же время рабочая процедура - это повторная проверка всех входов, которые могут быть автозаполнены, если это то, что вы пытаетесь сделать, на submit.


Редактировать 13 декабря 2016 года:

Был открыт новый билет Chromium, и его получают лучше. Если вы заинтересованы в изменении этого поведения Chrome, пожалуйста, запустите этот новый билет:

https://bugs.chromium.org/p/chromium/issues/detail?id=669724


Продолжая то, что сказал Энди Мерсер , вот моя работа. Как и многие люди, мне не нужно фактическое значение пароля. Мне просто нужно знать, что окно пароля было автозаполнено, чтобы я мог отображать правильные сообщения проверки.

Лично я бы не использовал предложенное решение для обнаружения причины изменения цвета фона с помощью автозаполнения Chrome. Этот подход кажется хрупким. Это зависит от того, что желтый цвет никогда не меняется. Но это может быть изменено расширением и быть другим в другом браузере на основе Blink (например, Opera). Кроме того, нет обещаний, что Google не будет использовать другой цвет в будущем. Мой метод работает независимо от стиля.

Во-первых, в CSS я устанавливаю содержимое, INPUTкогда к нему применяется псевдокласс:input:-webkit-autofill { content: "feff" }

const autofillContent = `"${String.fromCharCode(0xFEFF)}"`;
function checkAutofill(input) {
    if (!input.value) {
        const style = window.getComputedStyle(input);
        if (style.content !== autofillContent)
            return false;
    }

    //the autofill was detected
    input.classList.add('valid'); //replace this. do want you want to the input
    return true;
}

Затем я создал процедуру проверки содержания:

input

Наконец, я опросил, inputчтобы завершить время автозаполнения:

const input = document.querySelector("input[type=password]");

if (!checkAutofill(input)) {
    let interval = 0;
    const intervalId = setInterval(() => {
        if (checkAutofill(input) || interval++ >= 20)
            clearInterval(intervalId);
    }, 100);
}

4

Другой вариант по состоянию на 16 декабря / Chrome 54

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

setTimeout(function() {
  // get the password field
  var pwd = document.getElementById('pwd');
  pwd.focus();
  pwd.select();
  var noChars = pwd.selectionEnd;
  // move focus to username field for first-time visitors
  document.getElementById('username').focus()
  if (noChars > 0) {
    document.getElementById('loginBtn').disabled = false;
  }
}, 100);

3

Я нашел решение этой проблемы, которая работает, по крайней мере, для моих целей.

У меня есть форма входа в систему, на который я просто хочу нажать Enter, как только он загрузится, но я столкнулся с неполадкой пароля в Chrome.

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

$(function(){

    // bind form submit loginOnSubmit
    $('#loginForm').submit(loginOnSubmit);

    // submit form when enter pressed on username or password inputs
    $('#username,#password').keydown(function(e) {
        if (e.keyCode == 13) {
            $('#loginForm').submit(e);
            return false;
        }
    });

});

function loginOnSubmit(e, passwordRetry) {

    // on submit check if password is blank, if so run this again in 100 milliseconds
    // passwordRetry flag prevents an infinite loop
    if(password.value == "" && passwordRetry != true)
    {
        setTimeout(function(){loginOnSubmit(e,true);},100);
        return false;
    }

    // login logic here
}
JavaScript, HTML, Google-хром,
Похожие вопросы