backSpace not firing the keyup event in android mobile

Question

This is the first time,I am working on mobile Apps.keyUp event not firing If I press backspace button.

I made a jsFiddle for reference.

Initially user entered 23 and then user deleted 3 using backspace button.While entering 23 event firing but while delete time event not firing.

I am using device : motorola motog,Android Version:4.4.2.

How can I fix this,can anyone help me with an example code.

Answer 1

The problem is somewhere Chrome stopped firing keypress events for "backspace" since Android 4.4. This has been problematic in many webview based apps to catch required events. There is a small relief from this by using the input event that fires whenever user types something, pastes something, or taps on ".com" button in the keyboard, etc.

It is best to rely on input event if you are looking only to capture changes to the input. It is not useful if you want to do preventing default actions.

For your case, I think it should fit. But beware, of the support for this event for earlier than Android 4 version.

Updated fiddle - http://jsfiddle.net/aravindbaskaran/33Snz/24/

Answer 2

As solution, you could avoid using 'input' event, as mentioned @aravind. The problem is 'input' event does not work with <=ie9 and some mobile opera devices. Of course you could use browsers support detection, for example by modernizr or simple snippet and use supporting keyUp/input event.

On the other hand you could use all events together and browser will decide which one it will use, by itself. The problem is - in this case callback function will be calling twice at modern browsers which support both events.

Workaround is to use debounce function to prevent double calling.

$('.parent').on('change keydown input', _.debounce(function() {
    // whatever
}, 0));

Note that I'm using keydown event instead of keyup because I set delay only 0 milliseconds, so keyup will be call much later and _.debounce doesn't could help.