> css教程 > css >

ios弹出键盘再收起时,原虚拟键盘位或按钮无法点击事件无效

来源:网络 文章列表 2019-08-15 8
ios弹出软键盘时fixed失效及点击空白处隐藏层的解决办法

我们知道移动端键盘事件上的问题都是疑难杂症

在H5端是没法监控键盘的弹出与收起的,resize事件触发的机型极其有限,何况我在ios中实测没有触发,安卓反而可以。因为安卓弹起键盘时会修改视窗的大小,但是ios并不会,如果你在ios上设置一个100%高度的body,弹起键盘后你会发现这个body是可以上下滚动的,即100%高度的body超出了视窗。

body高度是100%,modal使用fixed定位,四个方向设置为0,预期的结果应该是两者都适应窗口大小,弹起键盘时自动适应。安卓上与预期相同,ios打开后出现整个modal和body可以滑动的情况。

ios上一直有个牛的优化,弹出键盘时会自动把当前输入框滚动到可视区域,在安卓中会出现键盘遮挡输入框的问题,需要手动调整,ios扳回一城。我在项目中为了让安卓达到同样的效果也是死了不少脑细胞。

在ios 12.1 中,机型为iphoneX,当我们聚焦输入框弹出虚拟键盘,然后点击键盘收起。出现了如下的效果图,并且下半部分做点击事件无效。

从现象中找问题,在虚拟键盘被收起的情况下,可以看到modal框视图正常得弹回了,但是仔细看看透明区域下,body视图还处在键盘弹起时的状态。what fuck? 然后modal下面的可操作区域始终点击无效。。。。

Why?

推测是body没有正确重新渲染,导致点击事件不处于body内而无法触发。

How?

那么怎么解决呢,是不是只要把body‘推’会来就行了? 方向有了,现在是如何‘推’的问题。

上文有说过,ios下弹出/收起键盘是没有触发resize事件的,那么在什么节点触发‘推’的操作就成了问题。

这时候封装的好处就体现出来了,因为项目中所有的地方都是使用封装过的input框,所以只需要在封装中做改造就好了。ios中点击虚拟键盘的完成按钮会触发失焦事件,安卓却不会,正是我们需要的钩子。

在钩子中设置“推回”:

onBlur = (e) => {
    const { onBlur } = this.props;
    document.body && (document.body.scrollTop = 0);
    onBlur && onBlur(e);
}

问题初步解决,但是引发的新问题也很明显,任何onBlur事件都会做出 scrollTop = 0 的操作,严重影响体验。

继续通过现象思考问题,当我们使用滑动触摸事件的时候,body会“跳动”到正常位置,而不不是正常的滚动,这一点很重要!

这表明了浏览器做了一个错误的渲染,那我不禁想到,我们做的“推”的操作是否必须?在一个错误的渲染下,我们是否只需要在键盘收起后做一个触发“重绘”的操作。

solution!

问题解决了,最终解决方案就很明显:

onBlur = (e) => {
    const { onBlur } = this.props;
    document.body && (document.body.scrollTop = document.body.scrollTop);
    onBlur && onBlur(e);
}

在input输入框失去焦点的钩子中设置滚动到原有位置(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)

解决方案的简单,是建立在深层的思考中的,如果这篇文章能对你有所触动,那我的写作就没有白费。

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接