Capture keys typed on android virtual keyboard using javascript

Unfortunately it seems you cannot do much here.Keypress event is deprecated, thus not fired.229 on keyup and keydown indicates the keyboard buffer is busy. The reason - when you press a key - the input is still not guaranteed to be what the user pressed, because of auto suggest and other events that may follow immediately and invalidate the event.Although in my opinion it would have been better to send the key first, then fire another event perhaps on auto suggest so you can act upon it separately...

The only thing that I currently know of is to attach to both - keydown and keyup, store the value on keydown, get the value on keyup and find the delta, which is what user pressed. Unfortunately this will not work for non-input controls (e.g. - the body or something like that).Maybe not what you want to hear as answer but still.

I ran into the same issue. Several explanations are out there but anyhow it seems strange that no solution is offered.For the moment I solved it by capturing the oninput event.

"This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed"

This event support inserted text too, from pasting text or from corrections & suggestions.

it doesn't give me the perfect solution cause I can only manipulate the text AFTER it has been entered, but for the moment it is the best I have.

If anyone has a better solution I will be glad to hear about it.

I came across this discussion while doing research for a project I was working on. I had to create input masks for a mobile app, and Pavel Donchev's answer got me thinking about what could work to capture keys in Android. In my specific project, keydown and keyup would not be enough because keyup event is only triggered after a key is released, so it would imply in a late validation, so I did some more research (and lots of trial and error) with input events and got it working.

var input = document.getElementById('credit-card-mask'),    oldValue,    newValue,    difference = function(value1, value2) {      var output = [];      for(i = 0; i < value2.length; i++) {        if(value1[i] !== value2[i]) {          output.push(value2[i]);        }      }      return output.join("");    },    keyDownHandler = function(e) {      oldValue = input.value;      document.getElementById("onkeydown-result").innerHTML = input.value;    },    inputHandler = function(e) {      newValue = input.value;      document.getElementById("oninput-result").innerHTML = input.value;      document.getElementById("typedvalue-result").innerHTML = difference(oldValue, newValue);    };input.addEventListener('keydown', keyDownHandler);input.addEventListener('input', inputHandler);

<input type="text" id="credit-card-mask" /><div id="result">  <h4>on keydown value</h4>  <div id="onkeydown-result"></div>  <h4>on input value</h4>  <div id="oninput-result"></div>  <h4>typed value</h4>  <div id="typedvalue-result"></div></div>