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

Question

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

我有一个自定义自动建议，它会在输入时显示在输入字段下方。所有内容都包含在带有 "position: fixed;" 的对话框中。自动完成是一个无序列表。单击 < li > 元素应将所选文本放入输入中。问题是，当用户点击 li 时，输入失去焦点，键盘消失，整个固定对话框 "jumps" 向下，点击事件无法识别。当键盘已经关闭时才被识别。

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

任何想法如何解决？

这是一段展示该行为的视频。它记录在 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 "framework" js.js 可在此处获取：https://github.com/JanST123/js.js 但是你当然也可以使用 vanilla JS 事件处理或者 jQuery 事件处理。

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

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

javascript

keyboard

blur

ios

cordova