HTML form - detect when user taps down arrow next input button using JavaScript?

Question

I am trying to create a custom HTML form. Is there a way in iOS using JavaScript to detect when the user taps the "down arrow" icon button to move to the next input?

I've attached a screenshot of the button I'm referring to.

Screenshot of iOS down arrow button

It doesn't trigger a keydown event. One indirect way of detecting it is to put an onFocus event on each input. Is that the best way to do this?

CHeck this post [here](https://stackoverflow.com/a/19464029/10864570) . Solved there already — Peter Abolude, Jun 17 '19 at 21:41

score 0 · Answer 1 · answered Jun 17 '19 at 21:47

Well you you can add an input element with a class near the button.

<input class="class1" triggerid="trigger1" />

Hide the input with CSS

.class1 {
  display: none;
}

Then use javascript:

$(".class1").focus(function(e){
  $("#"+$(this).attr("trigger1")).trigger("click");
});

score 0 · Answer 2 · answered Jun 17 '19 at 22:23

There is no special event for that specific button. But you could combine some event-listeners to estimate if the focus-change was triggered by that button.

let isKeyboardActive = false;
document.addEventListener('focusout', function(event) {
  isKeyboardActive = true; // virtual iOS keyboard is visible
});
document.addEventListener('focusin', function(event) {
  isKeyboardActive = false; // virtual iOS keyboard is hidden
});

let touchesActive = 0;
let inputs = document.querySelectorAll('input');
for (let input of inputs) {
  input.addEventListener('touchstart', function(event){
    touchesActive++;
  });
  input.addEventListener('touchend', function(event){
    setTimeout(function(){ touchesActive--; }, 500); // we need a delay here
  });
  input.addEventListener('touchcancel', function(event){
    setTimeout(function(){ touchesActive--; }, 500); // we need a delay here
  });
  input.addEventListener('focus', function(event){
    if (isKeyboardActive && touchesActive < 1) { // check number of active touches and virtual keyboard-state
      // focus probably changed by the virtual iOS keyboard
    }
  });
}

Tested with Safari on iOS 12.3.1 (iPhone)

HTML form - detect when user taps down arrow next input button using JavaScript?

2 Answers2