Форма HTML - определить, когда пользователь нажимает стрелку вниз на следующую кнопку ввода с помощью JavaScript?

Question

Я пытаюсь создать пользовательскую форму HTML.Есть ли способ в iOS, использующий JavaScript, чтобы определять, когда пользователь нажимает кнопку со значком «стрелка вниз», чтобы перейти к следующему вводу?

Я приложил снимок экрана с кнопкой, на которую я ссылаюсь.

Снимок экрана iOS-кнопки со стрелкой вниз

Не вызывает событие нажатия клавиши.Одним из косвенных способов его обнаружения является помещение события onFocus на каждый вход.Это лучший способ сделать это?

Answer 1

Специальных событий для этой конкретной кнопки не существует. Но вы могли бы объединить несколько прослушивателей событий, чтобы оценить, было ли изменение фокуса вызвано этой кнопкой.

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

Протестировано с Safari на iOS 12.3.1 (iPhone)

Answer 2

Ну, вы можете добавить элемент ввода с классом рядом с кнопкой.

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

Скрыть ввод с помощью CSS

.class1 {
  display: none;
}

Тогда используйте JavaScript:

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