vue H5 IOS中自定义的弹框(模态框)点击软键盘中 "完成" 后导致弹框(模态框)中的事件无法触发

参考地址:http://www.cocoachina.com/cms/wap.php?action=article&id=25941
https://www.cnblogs.com/jinjiyese153/p/10436511.html

问题描述
微信公众号中有项功能是弹框模态框,输入信息后保存操作。但是在IOS系统中发现,当输入内容后,点击键盘上的“完成”后,再点击“提交”无反应;跳过“完成”直接点击“提交”就可以正常保存

问题原因
当键盘弹出后,会将body向上弹起;但是点击“完成”后并没有将body拉回,导致点击事件不在body内而无法触发。

解决方案
点击ios键盘的“完成”按钮会触发失焦事件,安卓不会;因此在失焦事件中触发浏览器的重绘就行了。

方法1

$("input").blur(function () {
  document.body && (document.body.scrollTop = document.body.scrollTop);
})
/**
 * 处理iOS 微信客户端6.7.4 键盘收起页面未下移bug
 */
;(/iphone|ipod|ipad/i.test(navigator.appVersion)) && document.addEventListener('blur', (e) => {
    // 这里加了个类型判断,因为a等元素也会触发blur事件
    ['input', 'textarea'].includes(e.target.localName) && document.body.scrollIntoView(false)
}, true)

你可能感兴趣的:(IOS)