Проблема с автозаполнением необязательного пароля в разных браузерах - PullRequest
Новая
       47

Проблема с автозаполнением необязательного пароля в разных браузерах

0 голосов
/ 16 июня 2020

Я снова и снова сталкиваюсь с одной и той же проблемой. Когда я ищу решение, везде есть множество ответов. Кажется, что ни один из них больше не работает . Не знаю, что и думать: похоже, разработчики веб-браузеров досконально изучают решения проблем веб-разработчиков, касающиеся автозаполнения паролей, и пытаются запретить свободу выбора разработчика: они все равно продолжают принудительно применять автозаполнение сохраненных паролей. Даже скрипты больше не помогают. Я искренне надеюсь, что ошибаюсь насчет того, что здесь говорится о запрете свободы. Lol!

Вот такая у меня проблема. У меня более двух страниц входа в один домен на веб-сайте, над которым я сейчас работаю. Они предназначены для совершенно разных целей. Одна страница входа в систему должна позволять пользователям сохранять свой пароль. Другая страница предназначена для соискателей, и у них не должно быть возможности сохранить или повторно использовать сохраненный пароль, если он хранится в браузере для того же домена.

Я попытался загрузить страницу с типом ввода по умолчанию = "текст" атрибут и сделав его type = "password" только для ввода со значением. Он работал отлично. Я также добавил функцию, чтобы вернуть тип к «тексту», если человек должен стереть ввод. Я проверил, и он вернул тип к "тексту". Но теперь есть огромное НО: похоже, что браузеры (протестированные на последней Chrome) решают не текущий тип ввода, а если элемент ввода хотя бы один раз имел type = "password" . Они могли придумать какое-то недоступное свойство DOM или что-то, что хранит предыдущие атрибуты, и если тип «пароль» назначен хотя бы один раз, он автоматически применяет автозаполнение, игнорируя все предустановки и текущие типы. :( Это очень расстраивает.

См. Картинку в приложении. Chrome: Проверить -> Элементы 

// Targeted Element:
// <input class="login" id="ssn" type="text" name="ssn" placeholder="9 digits" maxlength="9" required>
$('#ssn')
    .on('focus', function() {
        if (!$(this).val())
            $(this).attr('type', 'text');
    })
    .on('input', function() {

        // Tried before validation and input limitation
        removeAutocomplete(this);

        const ssn = $(this).val().replace(/[^\d]/g, '');
        $(this).val(ssn);

        // Tried after validation and input limitation also
        removeAutocomplete(this);

        function removeAutocomplete(el) {
            if (!$(el).val())
                $(el).removeAttr('type').attr('type', 'text');
            else {
                if ($('#mask').hasClass('fa-eye'))
                    $(el).attr('type', 'password');
            }
        }

    });

Я что-то здесь пропустил? Скрипт похоже, выполняет свою работу, реакция браузера на результат неадекватна.

ВОПРОС: Существуют ли какие-либо альтернативные способы (библиотеки или фреймворки) для маскировки входных данных аналогично input type = "password"? Потому что похоже, что попытки найти решение проблемы становятся безнадежными, потому что это может быть отменено, когда выйдет новое обновление браузера.

...