keyup not working on Chrome on Android

Question

I am using bootstrap typeahead.

It depends on this jQuery code to work:

el.on('keyup', doSomething() )

On Chrome on Windows it works fine. On Chrome on Android it doesn't. The keyup event is never fired. The element to which it is bound definitely has the focus.

This appears to be a recent development.

Chrome 28.0.1500.64 Android 4.1.2 SGP321 Build/10.1.1.A.1.307

Thanks

--Justin Wyllie

Enrica

Answer 1

Sorry to say this but keyup/keydown events do not work for chrome browser in android. There are other people who have reported this issue(Here and Here) from last 1 year and its not fixed yet. so it's better for developers to avoid using these events till it gets fixed.

Removable

Bizarrely enough I've discovered that if you put in a space (keycode 32) and then a backspace ( keycode 8) if fires the keyup for the backspace. But only with the preceding space! – Enrica

there is an explanation here why key events are difficult to fetch in android chrome code.google.com/p/chromium/issues/detail?id=132015 – Removable

I read the some of the comments on 118639. I have disabled autocomplete though so I don't see why it couldn't. Anyway fair enough - I can see the problems in general. But - what can one do? Do I have to write a setInterval function and monitor for text changes? By the way - it seems to work with any non alphanumeric character followed by a backspace - not just a space. – Enrica

Answer 2

I came across this same problem earlier today. How can android chrome not support these key events! I assume you've found a workaround by now, but here's a fix that I came up with for now.

function newKeyUpDown(originalFunction, eventType) {
    return function() {
        if ("ontouchstart" in document.documentElement) { // if it's a touch device, or test here specifically for android chrome
            var $element = $(this), $input = null;
            if (/input/i.test($element.prop('tagName')))
                $input = $element;
            else if ($('input', $element).size() > 0)
                $input = $($('input', $element).get(0));

            if ($input) {
                var currentVal = $input.val(), checkInterval = null;
                $input.focus(function(e) {
                    clearInterval(checkInterval);
                    checkInterval = setInterval(function() {
                        if ($input.val() != currentVal) {
                            var event = jQuery.Event(eventType);
                            currentVal = $input.val();
                            event.which = event.keyCode = (currentVal && currentVal.length > 0) ? currentVal.charCodeAt(currentVal.length - 1) : '';
                            $input.trigger(event);
                        }
                    }, 30);
                });
                $input.blur(function() {
                    clearInterval(checkInterval);
                });
            }
        }
        return originalFunction.apply(this, arguments);
    }
}
$.fn.keyup = newKeyUpDown($.fn.keyup, 'keyup');
$.fn.keydown = newKeyUpDown($.fn.keydown, 'keydown');

Moderator