DOM событие для автозаполнения пароля браузера? - PullRequest
2 голосов
/ 21 августа 2010

У меня есть довольно стандартное поле ввода имени пользователя / пароля на веб-сайте, который я создаю. Поле пароля содержит элемент div с паролем, наложенным поверх него, который установлен на display: none; в фокусе или щелчке.

Это прекрасно работает, пока пользователь не попросит свой браузер запомнить пароль: в этом случае вы можете закончить с ситуацией на прикрепленном снимке экрана. attached screen shot

Мой вопрос: есть ли событие, к которому я могу привязаться, которое сработает, когда поле пароля будет заполнено автоматически, и я смогу скрыть div помощи?

Ответы [ 5 ]

1 голос
/ 21 августа 2010

Вот дерьмовое решение, которое я нашел:

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

0 голосов
/ 24 декабря 2018

Для chrome: -webkit-autofill класс работает отлично. Для решения, независимого от браузера, которое я обнаружил, событие mouseleave вызывается всякий раз, когда мышь находится над выпадающим списком автозаполнения браузера. Вы можете написать обработчик для ввода или его родительских элементов или окна событий. см. код ниже.

В HTML:

<div id="banner-message">  
    <div>
        <input type="text" id="name" name="name" placeholder="name"/> 
    </div>
    <div>
        <input type="text" id="email" name="email" placeholder="email"/> 
    </div>
    <div>
        <input type="password" name="password" placeholder="password"/> 
    </div>
</div>
<div id="event-log"> </div>

В jQuery:

var banner = $("#banner-message")
var eventlog = $("#event-log");
var inputs = $("input");

//Following event fired when hovered over autofill dropdown, 
banner.on("mouseleave", function(event) { 
    var targetid = event.target.id;  
    eventlog.html('Source id::'+targetid);
});

В приведенном выше коде, когда событие вызывается, event.target - это элемент, от которого указатель остается и вводится в раскрывающемся списке. Следует отметить, что вы должны определить правильный способ обнаружения отпускания мыши, который срабатывает только при автозаполнении. Приведенное выше решение сработало для меня.

см. Эту скрипку: https://jsfiddle.net/nilesh_ramteke/nt7a1ruw/20/

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

0 голосов
/ 19 апреля 2016

возможно мое решение с jquery привлечет ваше внимание :). вот что я сделал для решения:

$('form input').bind('change', function(){
    $('form').find('input').each(function(){
      label = $(this).prev('label');
      if($(this).val()!==''){
        label.addClass('active');
      }
    });
});

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

для уточнения => JSFIDDLE

0 голосов
/ 30 апреля 2014

Я использовал событие размытия имени пользователя, чтобы проверить, заполнено ли поле pwd автоматически.

$('#userNameTextBox').blur(function () {
        if ($('#userNameTextBox').val() == "") {
            $('#userNameTextBox').val("User Name");
        }
        if ($('#passwordTextBox').val() != "") {
            $('#passwordTextBoxClear').hide(); // textbox with "Password" text in it
            $('#passwordTextBox').show();
        }
    });

Это работает для IE и должно работать для всех других браузеров (я только проверял IE)

0 голосов
/ 03 сентября 2010

Почему вы не проверяете, заполнено ли текстовое поле пароля в событии document.ready и в каждом событии usernametextfield.onchange? Таким образом, вам не нужен таймер, и он должен быть правильным.

Примечание: Может быть (я не проверял это), что событие onchange будет запущено до того, как браузер заполнит поле пароля. Чтобы обработать этот короткий промежуток времени, вы можете запустить проверку через несколько 100 миллисекунд, используя setTimeOut.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...