javascript - Cordova iOS : Click on custom auto suggest not recognized cause keyboard closes

Question

在我的 Cordova 应用程序中，我在 iOS 设备上遇到问题，但我不知道如何解决。

我有一个自定义自动建议，它在键入时显示在输入字段下方。所有内容都包含在一个带有“position:fixed;”的对话框中。自动完成是一个无序列表。单击

元素应将所选文本放入输入中。问题是，当用户点击li时，输入失去焦点，键盘消失，整个固定对话框“跳”下来，并且无法识别点击事件。当键盘已关闭时会被识别。

我尝试了几种解决方法，例如在模糊后立即将焦点返回到输入字段。但这没有帮助。键盘关闭然后打开，而不是仅仅保持打开状态。

有什么解决办法吗？

这是一段展示该行为的视频。它是在 iOS 模拟器上记录的，但在真实的 iPhone 6s 上有相同的行为。

Answer 1

我现在已经找到解决办法了。正如我所说，当键盘隐藏时，不会触发 click 事件，但会触发 touchstart 事件。

所以我做了一个解决方法，寻找 touchstart 事件，然后寻找 blur 事件。如果 touchstart-target 在给定时间内没有收到点击事件，我将触发一个。这适用于我的测试 iPhone 6s。

这是代码:

var iosTapTarget=null;
if (device.platform === 'iOS') {
  js.eventListener(document.body).add('iosTap', 'touchstart', function (e) {
    iosTapTarget = e.target;

    js.eventListener(iosTapTarget).add('iosTapClick', 'click', function(e) {
      // when the target receives a click, do not trigger another click
      if (iosTapTarget) js.eventListener(iosTapTarget).remove('iosTapClick', 'click');
      iosTapTarget = null;
    });

    // after short time unset the target
    window.setTimeout(function () {
      if (iosTapTarget) js.eventListener(iosTapTarget).remove('iosTapClick', 'click');
      iosTapTarget = null;
    }, 600)
  });

  // on each input fields listen for blur event and trigger click event on element received touchstart before
  var blurableElements = document.querySelectorAll('input[type=text],input[type=email],input[type=password],textarea');
  for (var j = 0; j < blurableElements.length; ++j) {
    js.eventListener(blurableElements[j]).remove('iosBlur', 'blur');
    js.eventListener(blurableElements[j]).add('iosBlur', 'blur', function () {
        window.setTimeout(function() {
          if (iosTapTarget) {
            js.eventListener(iosTapTarget).remove('iosTapClick', 'click');
            js.triggerEvent(iosTapTarget, 'click');
          }
        }, 50);
    });
  }
}

PS:事件处理来 self 自己的 JS“框架”js.js，可在此处获取:https://github.com/JanST123/js.js当然，您也可以使用普通 JS 事件处理或 jQuery 事件处理。