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 事件处理。
在我的 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 事件处理。