CODEWITHSUNDEEP
javascriptandroidhtmlgoogle-chromeevents
Marc Meeuwis
Marc Meeuwis

Reputation: 71

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

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)

Upvotes: 7

Views: 2739

Answers (2)

Mahn
Mahn

Reputation: 16605

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.

Upvotes: 5

w.t.f.
w.t.f.

Reputation: 29

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.

Upvotes: 2

Related Questions