JavaScript keypress event not raised on Android browser

Question

I have created a simple code to handle keypress event:

var counter = 0;        
$('input').on('keypress', function () {
    $('div').text('key pressed ' + ++counter);
});

JSFiddle.

But keypress event handler is not raised on mobile browser (Android 4+, WindowsPhone 7.5+). What could be the issue?

Solution 1

Use the keyup event:

// JavaScript:
var counter = 0;        
document.querySelector('input').addEventListener('keyup', function () {
    document.querySelector('div').textContent = `key up ${++counter}`;
});

// jQuery:
var counter = 0;        
$('input').on('keyup', function () {
    $('div').text('key up ' + ++counter);
});

Solution 2

I believe keypress is deprecated now. You can check in the Dom Level 3 Spec. Using keydown or keyup should work. The spec also recommends that you should use beforeinput instead of keypress but I'm not sure what the support of this is.

Solution 3

Use jQuery's input event, like this:

$( 'input' ).on( 'input', function() {
    ...
} );

With this you can't use e.which for determining which key was pressed, but I found a nice workaround here: http://jsfiddle.net/zminic/8Lmay/

Solution 4

$(document).ready(function() {
  var pattForZip = /[0-9]/;
  $('#id').on('keypress input', function(event) {
    if(event.type == "keypress") {
      if(pattForZip.test(event.key)) {
        return true;
      }
      return false;
    }
    if(event.type == 'input') {
      var bufferValue = $(this).val().replace(/\D/g,'');
      $(this).val(bufferValue);
    }
  })
})

View more solutions

Comments

[welbornio]

Try @The System Restart's suggestion here: stackoverflow.com/questions/10580295/…

[Íhor Mé]

You could even much rather use oninput if you want to react to changes. But if what you're after is actual keys entered, none of these will help you on Android.

[Mrunal]

@ÍhorMé Do you have any solution for Android keyboard events?

[Íhor Mé]

@Mrunal Universally, you should use oninput event. I've posted the code for handling input text on all (or at least many) platforms here stackoverflow.com/questions/30743490/… if that's what you're after. It's formatted with 4-spaced tabs, though, while Stack has utterly crazy 8-spaced ones, though, mind that.

[Meixner]

keydown does not deliver characters but key codes. Therefore, keydown is no replacement for keypress.

[Adam Hughes]

@Meixner This was a long time ago so I don't know if Keypress still isn't supported in Android. With this solution though the idea is you find the character from the keycode

[Meixner]

"keypress" is still not supported with the on screen keyboard.

[kiecodes]

Please try to add a little more info for your solution. And welcome to Stack Overflow. :)

[OM The Eternity]

keypress still works with iphone but doesnt work with Android, where as keydown doesnt work for both for iphone and android

[user3187724]

Note: beforeinput is supposed to cancellable but it is not on Chrome. stackoverflow.com/questions/53140803/…