Key event doesnt trigger in Firefox on Android when word suggestion is on

Question

I have a search field that triggers an autocomplete search while typing. I have it trigger on keyup. This works perfectly in most browsers, but in Firefox on Android, this d

Answer 1

I found a solution in this answer to another question. The question was a basically "duplicate the text I write dynamically into another part of the page". The answer was including support for catching changes by non-keyboard actions, like pasting text using mouse. It was solved by starting a sniffer on focus in the text field that checks if the value has changed using setInterval(...). It clears the timer on blur.

This solved my problem which was basically that the key events didn't trigger, as well as the "paste by mouse" issue that I didn't realize was a problem until I found this answer...!

This works, but I'm not sure I am totally happy with this solution, because it uses a sniffer. I would be more happy with using some sort of event that is triggered on value change no matter what the cause of the change is. Using the change event would not work, as that is not triggered until focus leaves the field.

Answer 2

You can use the input event instead, that worked for me in Firefox on Android. You could bind event handlers to both input and keyup events for backwards compatibility, but in most modern browsers this will fire both:

$('#searchField').bind('input keyup', function(e){
    var searchValue = $(this).val();
    searchApi._executeAutocomplete(searchValue);
});

Example here: http://jsfiddle.net/JQ928/3/

Answer 3

Trough the fact that Firefox on Android doesn't trigger key-events, but also triggers the input-event some kind of weird, (like if you press one key two events get triggerd, and it also triggers the input-event if you leave the input) I had to write my own event:

(function($){
var $event = $.event,
    $special = $event.special.fennecInput = {
        setup: function(){
            $(this).on('input',$special.handler);
        },
        teardown: function(){
            $(this).off('input',$spceial.handler);
        },
        handler: function(event) {
            var context = this,
                args = arguments,
                dispatch = function() {
                    event.type='fennecInput';
                    $event.dispatch.apply(context,args);
                };
            if($(context).val() != $(context).attr('data-fennecInput-oldval')){
                dispatch();
                $(context).attr('data-fennecInput-oldval',$(context).val());
            }
        }
    };
})(jQuery);

this event gets only triggered if an input-event happens that changes the value, so it doesn't execute events unnecessary.