Cordova iOS：点击自定义自动建议无法识别导致键盘关闭

Question

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

我有一个自定义自动建议，在输入时显示在输入字段下方。 全部包含在“position：fixed;”对话框中。 自动填充是一个无序列表。 单击<li>元素应将所选文本放入输入中。 问题是，当用户点击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：事件处理来自我自己的JS“框架”js.js可以在这里找到： https ： //github.com/JanST123/js.js但是你当然也可以使用vanilla JS事件处理或jQuery事件处理。