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

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

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

Действия по воссозданию: введите любой ввод в одно из полей и нажмите «Отправить».

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

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

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


javascript autocomplete firefox
person KClough    schedule 14.05.2009    source источник
comment
Пожалуйста, поменяйте отметку справа на ответ Джетро. Взлом в ответе, который вы пометили как правильный, не нужен!   -  person Alexis Wilke    schedule 11.01.2016

Ответы (6)


arrow_upward
6
arrow_downward

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

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

<!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>
person Serapth    schedule 14.05.2009
comment
Спасибо за предложенный обходной путь, Серапт, но его будет довольно сложно применить на странице формы с 50 полями, не так ли? - person ; 17.01.2011

arrow_upward
32
arrow_downward

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

$('#password').bind('input', function(){ /* your code */});
person Jethro Larson    schedule 26.07.2011
comment
Имейте в виду: это не поддерживалось до IE9 и Safari 5. Safari 4 поддерживал textinput. - person Blaise; 16.03.2012
comment
Вопрос конкретно касался FF, и это работает там, по крайней мере, еще в FF3.5, если я правильно помню. - person Jethro Larson; 25.04.2012
comment
Действительно, oninput запускается и в Google Chrome (как минимум 26+). С Mootools захват входного события работает отлично! - person shakaran; 15.05.2013
comment
+1: Этот ответ должен быть отмечен как правильный! Вот документация Mozilla о событии ввода. - person Fabien Quatravaux; 26.09.2013
comment
Событие 'input' не запускалось для поля password, когда автозаполнение было для поля login, и в аналогичных ситуациях - person Lanorkin; 26.06.2014

arrow_upward
7
arrow_downward

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

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

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

$('#email').bind('DOMAutoComplete',function() { ...
person Aleksandar Pavić    schedule 29.09.2011
comment
Это должно быть очень специфично для браузера ... Было бы здорово увидеть больше информации об этом ... Я пробовал это в Chrome, и это не сработало - person Serj Sagan; 08.10.2011
comment
Отлично работает в FF30! Может быть конкретным, но лучше, чем ничего. Спасибо. - person wedi; 28.07.2014

arrow_upward
1
arrow_downward

Еще одна предлагаемая работа. На этот раз, используя опрос, вы можете работать с ним точно так же, проверяя наличие «изменений» в вашем поле. Измените значение опроса (по умолчанию 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>
person Drav Sloan    schedule 10.06.2011

arrow_upward
0
arrow_downward

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

person RichieHindle    schedule 14.05.2009

arrow_upward
0
arrow_downward

Вам нужно будет размыть поле ввода и сбросить на него фокус. Однако для этого потребуется небольшая хитрость.

person geowa4    schedule 14.05.2009