Question

我正在尝试订阅更改ajax自动完成表单的输入标记上的事件。当用户单击FireFox中的自动完成建议时，不会触发这些更改事件。

我看过IE的修复程序，但不是FireFox。您可以查看此行为here

重新创建的步骤：在其中一个框中键入任何输入，然后单击“提交”。

开始在同一个框中再次输入值。

您应该会在输入框下方看到自动填充建议框。请注意，单击建议不会触发更改事件（它也不会触发单击事件）

目前我唯一的选择是禁用此字段的自动填充功能，但我不想这样做。

Answer 1

Firefox 4+ fire＆＃39; oninput＆＃39;使用自动填充时的事件这里有一些jQuery可以让它更具可操作性：

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

Answer 2

我遇到了同样的问题。

显然，可以使用密码管理器调试 https://wiki.mozilla.org/Firefox:Password_Manager_Debugging

所以我发现对我来说 DOMAutoComplete 事件被触发了我已经设法通过jQuery的绑定（例如

）将它连接到一个字段

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

Answer 3

如果它让你感觉更好，那就是known bug

建议的解决方法:(不是我的，来自here

<!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>

Answer 4

另一个建议的工作。这次使用轮询，您可以完全使用它以同样的方式，检查你的领域的“变化”。调整轮询值（默认为 375ms为您自己的口味）。

我使用了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>

Answer 5

可能的选择：您是否可以简单地使用计时器来判断文本框的值何时发生变化？

Answer 6

您将不得不模糊输入字段并将焦点重置为它。但这需要一点点的打滑。

FireFox捕获自动完成输入更改事件

6 个答案: