Firefox Capture Autocomplete Input Change Event

August 09, 2024 Post a Comment

I'm trying to subscribe to change events on an input tag for an ajax auto complete form. These change events are not firing when the user clicks an autocomplete suggestion from Fir

Solution 1:

Firefox 4+ fire 'oninput' event when autocomplete is used. Here's some jQuery to make this more actionable:

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

Solution 2:

I've had the same problem.

Apparently, there is password manager debugging available https://wiki.mozilla.org/Firefox:Password_Manager_Debugging

So I've found that for me DOMAutoComplete event got triggered and I've managed to attach it sucessfuly to a field via jQuery's bind like

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

Solution 3:

If it makes you feel better, it is a known bug

Proposed workaround: (Not mine, from here

Baca Juga

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

var val_textBox;

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

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

Solution 4:

Another Suggested work around. This time using polling, you can work it in exactly the same way, checking for "changes" to your field. Tweak the poll value (default to 375ms for your own taste).

I've used jQuery and a jquery plugin someone wrote: https://github.com/cowboy/jquery-dotimeout/

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

<html><head><metacharset="utf-8"><title>onChange() for Firefox / IE autofil get-around</title><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><scripttype="text/javascript"src="http://code.jquery.com/jquery-latest.min.js"></script><scripttype="text/javascript"src="/~dsloan/js/ba-dotimeout.js"></script><scripttype="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 pollif($("#myname").val() == val) {
                        returntrue;

                    // 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...';
                            } elseif(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());

                    returntrue;
                });
            });

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

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

Solution 5:

A possibly alternative: could you simply use a timer to tell when the value of the text box changes?

JavaScript Download