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)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值