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?

Try @The System Restart's suggestion here: http://stackoverflow.com/questions/10580295/jquery-keyup-not-working-on-android — welbornio, Mar 04 '14 at 07:14

score 25 · Answer 1 · answered Jun 26 '14 at 15:25

25

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.

answered Jun 26 '14 at 15:25

Adam Hughes

2,197
20
31

1

keydown does not deliver characters but key codes. Therefore, keydown is no replacement for keypress. – Meixner Jul 05 '17 at 07:57
@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 – Adam Hughes Jul 05 '17 at 08:53
1

"keypress" is still not supported with the on screen keyboard. – Meixner Jul 05 '17 at 12:33
1

`keypress` still works with iphone but doesnt work with Android, where as `keydown` doesnt work for both for iphone and android – OM The Eternity Jun 20 '18 at 07:32
Note: `beforeinput` is supposed to cancellable but it is not on Chrome. https://stackoverflow.com/questions/53140803/why-is-contenteditable-beforeinput-event-not-cancelable – user3187724 Oct 28 '19 at 16:02

score 18 · Accepted Answer · edited Mar 19 '21 at 04:22

18

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);
});

edited Mar 19 '21 at 04:22

joe

3,752
1
32
41

answered Mar 18 '14 at 02:22

HDT

2,017
20
32

3

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. – Íhor Mé Mar 18 '17 at 16:36
1

@ÍhorMé Do you have any solution for Android keyboard events? – Mrunal Jun 09 '17 at 13:32
1

@Mrunal Universally, you should use oninput event. I've posted the code for handling input text on all (or at least many) platforms here https://stackoverflow.com/questions/30743490/capture-keys-typed-on-android-virtual-keyboard-using-javascript/42918806#42918806 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. – Íhor Mé Jun 09 '17 at 23:30

Torben · Answer 3 · 2017-08-17T14:34:37.043

1

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/

edited Aug 17 '17 at 14:34

answered Aug 17 '17 at 14:26

Torben

479
6
16

score 1 · Answer 4 · answered Nov 06 '17 at 15:56

1

$(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);
    }
  })
})

answered Nov 06 '17 at 15:56

Chakradhari Jamili

137
7

4

Please try to add a little more info for your solution. And welcome to Stack Overflow. :) – kiecodes Nov 06 '17 at 16:22

score 0 · Answer 5 · answered Jul 26 '17 at 11:39

Yes, some android browser are not supporting keypress event, we need use to only keydown or keyup but will get different keycodes, to avoiding different key codes use the following function to get the keycode by sending char value.

Eg:

function getKeyCode(str) {
  return str && str.charCodeAt(0);    
}
function keyUp(){
 var keyCode = getKeyCode("1"); 
}

score -6 · Answer 6 · answered Feb 28 '17 at 11:59

I think it is bad idea to use other events in place of 'keypress'. What you need to do is just include a jQuery file into your project. A file named jQuery.mobile.js or quite similar (ex. jQuery.ui.js) of any version can help you.

You can download it from : https://jquerymobile.com/download/

JavaScript keypress event not raised on Android browser

6 Answers6

Linked

Related