HTML表单 - 检测用户何时使用JavaScript点击向下箭头下一个输入按钮？答案

【问题标题】：HTML form - detect when user taps down arrow next input button using JavaScript?HTML表单 - 检测用户何时使用JavaScript点击向下箭头下一个输入按钮？
【发布时间】：2019-06-17 21:22:20
【问题描述】：

我正在尝试创建自定义 HTML 表单。 iOS 中有没有办法使用 JavaScript 来检测用户何时点击“向下箭头”图标按钮移动到下一个输入？

我附上了我所指按钮的屏幕截图。

Screenshot of iOS down arrow button

它不会触发 keydown 事件。检测它的一种间接方法是在每个输入上放置一个 onFocus 事件。这是最好的方法吗？

【问题讨论】：

查看这篇文章here。已经解决了

标签： javascript ios forms

【解决方案1】：

你可以在按钮附近添加一个带有类的输入元素。

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

用 CSS 隐藏输入

.class1 {
  display: none;
}

然后使用javascript：

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

【讨论】：

【解决方案2】：

该特定按钮没有特殊事件。但是您可以结合一些事件侦听器来估计焦点更改是否由该按钮触发。

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

在 iOS 12.3.1 (iPhone) 上使用 Safari 测试

【讨论】：