When the user clicks on the 'Enter' button in Android (right bottom button) I'm unable to catch the event. I tried 'keyup', 'keydown', 'keypress' and the native JS eventlistener functions. It does work on PC or default browser in Android systems.

This is my testcode:

<form>
  <input type="text" id="test" name="1">
  <input type="text" id="test2" name="2">
  <input type="text" id="test3" name="3">
</form>

<script src=".3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>

<script>
  $('#test').keyup(function(e){
    alert('keyup ' + e.keyCode);
  });
  $('#test').keydown(function(e){
    alert('keydown ' + e.keyCode);
  });
  $('#test').keypress(function(e){
    alert('keypress' + e.keyCode);
  });
</script>

What happens is that it 'tabs' to the next field, but not with a keypress/keydown/keyup and keyCode tab, just a tab that seems unable to catch. When you press 'enter' in the last input (#test3 in this case) it does trigger an event with keyCode 13 because it's the last element in the form (it's not triggering anything in this code but I've tested it)

When the user clicks on the 'Enter' button in Android (right bottom button) I'm unable to catch the event. I tried 'keyup', 'keydown', 'keypress' and the native JS eventlistener functions. It does work on PC or default browser in Android systems.

This is my testcode:

<form>
  <input type="text" id="test" name="1">
  <input type="text" id="test2" name="2">
  <input type="text" id="test3" name="3">
</form>

<script src="https://code.jquery./jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>

<script>
  $('#test').keyup(function(e){
    alert('keyup ' + e.keyCode);
  });
  $('#test').keydown(function(e){
    alert('keydown ' + e.keyCode);
  });
  $('#test').keypress(function(e){
    alert('keypress' + e.keyCode);
  });
</script>

What happens is that it 'tabs' to the next field, but not with a keypress/keydown/keyup and keyCode tab, just a tab that seems unable to catch. When you press 'enter' in the last input (#test3 in this case) it does trigger an event with keyCode 13 because it's the last element in the form (it's not triggering anything in this code but I've tested it)

• javascript
• android
• html
• google-chrome
• events

• 1 Any solution for this? I'm having a similar issue. – theyuv Commented Oct 25, 2019 at 16:13

2 Answers 2

If you do not need to preserve the "tabbing" behaviour, use the enterkeyhint attribute:

<input type="text" enterkeyhint="done"/>

This replaces the "Next" button with an enter button that you can catch as "Enter" via keydown.

Same problem in Adroid Google Chrome since 101 version. Enter key press event only occurs in the last form or document text input box. Possible solutions:

1. Use onchange or onblur events.
2. Put your text inputs in separate forms and prevent default form submit event.