Событие изменения ввода автозаполнения FireFox

Я пытаюсь подписаться на изменения событий во входном теге для автоматической формы ajax. Эти события изменения не срабатывают, когда пользователь нажимает предложение автозаполнения из FireFox.

Я видел исправления для IE, но не FireFox. Вы можете просмотреть это поведение здесь

Шаги по воссозданию: введите любой ввод в одном из полей и нажмите "Отправить".

Начните вводить значение снова в том же поле.

Вы должны увидеть, что окно ввода автозаполнения появляется под полем ввода. Обратите внимание, что нажатие на подсказку не запускает событие изменения (оно также не запускает событие click)

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

Ответ 1

Если вам становится лучше, это известная ошибка

Предлагаемое обходное решение: (Не мое, от здесь

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mozilla Firefox Problem</title>
<script type="text/javascript">
function fOnChange()
{
  alert('OnChange Fired');
}

var val_textBox;

function fOnFocus()
{
  val_textBox = document.getElementById('textBox').value;
}

function fOnBlur()
{
  if (val_textBox != document.getElementById('textBox').value) {
    fOnChange();
  }
}
</script>
</head>
<body>
<form name="frm">
<table>
<tr>
<td><input type="text" id="textBox" name="textBox" onFocus="fOnFocus()" onBlur="fOnBlur()"></td>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
</tr>
</form>
</body>
</html>

Ответ 2

Firefox 4+ fire 'oninput', когда используется автозаполнение.
Вот некоторые jQuery, чтобы сделать это более действенным:

$('#password').bind('input', function(){ /* your code */});

Ответ 3

У меня была такая же проблема.

По-видимому, имеется отладка диспетчера паролей https://wiki.mozilla.org/Firefox:Password_Manager_Debugging

Итак, я обнаружил, что для меня произошло срабатывание DOMAutoComplete Мне удалось успешно присоединить его к полю через jQuery bind, например

$('#email').bind('DOMAutoComplete',function() { ...

Ответ 4

Другая Рекомендуемая работа. На этот раз, используя опрос, вы можете так же, проверяя "изменения" в вашем поле. Измените значение опроса (по умолчанию 375 мс для вашего собственного вкуса).

Я использовал jQuery и плагин jquery, который кто-то писал: https://github.com/cowboy/jquery-dotimeout/

Git Hub Src: https://raw.github.com/cowboy/jquery-dotimeout/master/jquery.ba-dotimeout.js

<html>
  <head>
    <meta charset="utf-8">
    <title>onChange() for Firefox / IE autofil get-around</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="/~dsloan/js/ba-dotimeout.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var val;
            var count=0; // used to illustrate the "poll count" 
                         // when focusing on the element and typing 
                         // (vs not focused)

            // set a focus function to poll the input
            $("#myname").focus(function() {

                // start polling
                $.doTimeout('checkname', 375, function() {
                    ++count;

                    // no changes, just exit this poll
                    if($("#myname").val() == val) {
                        return true;

                    // store the value
                    } else {
                        val = $("#myname").val();
                    }
                    var str;

                    // do stuff here with your field....
                    if($(document.activeElement) && 
                        ($(document.activeElement).attr('id') ==
                        $("#myname").attr('id'))) {

                            var len = $("#myname").val().length;
                            if(len == 0) {
                                str = 'Timer called, length 0...';
                            } else if(len < 2) {
                                str = 'Timer called, length < 2...';
                            } else {
                                str = 'Timer called, valid!';
                            }
                    }

                    // show some debugging...
                    $("#foo span").html(str+' (count: '+count+'): '+
                        $(document.activeElement).attr('id')+
                        ', val: '+$("#myname").val());

                    return true;
                });
            });

            // set a blur function to remove the poll
            $("#myname").blur(function() {
                $.doTimeout('checkname');
            });

        });
    </script>
  </head>
  <body>
    <form action="#" method=post>
        Name: <input type="text" name="name" value="" id="myname" />
        Scooby: <input name="scooby" value="" id="scooby" />
        <input type="submit" value="Press Me!" />
    </form>
    <div id="foo"><span></span></div>
  </body>
</html>

Ответ 5

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

Ответ 6

Вам придется размыть поле ввода и reset фокус на него. Тем не менее, это потребует немного обмана.