Android Chrome keypress event "Enter" not triggered when using multiple input elements

Question

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.com/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)

Answer 1

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.