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

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

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

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

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

任何想法如何解决?

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

我现在找到了解决办法。正如我所说,键盘隐藏时不会触发 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 事件处理。