资讯专栏INFORMATION COLUMN

微信6.7.4版本,ios 键盘顶上去页面 收起键盘后页面不下去bug修复

AnthonyHan / 2308人阅读

摘要:微信版本出现的问题,用户输入时,软键盘弹出。收起软键盘的时候,页面下部软键盘原来位置会变成一片空白区域,页面没有恢复原状。实现原理出现上述情况,手动下拉页面,页面会恢复正常。所以,在的事件中监听软键盘收起,模拟手动下拉。前提,本身没有滚动。

iphone微信6.7.4版本出现的问题,用户输入时,软键盘弹出。收起软键盘的时候,页面下部软键盘原来位置会变成一片空白区域,页面没有恢复原状。

var n = document.querySelectorAll("input,textarea");
Array.prototype.forEach.call(n, function(dom) {        
    var pageDom = 5;
    dom.onblur = function() {
    document.body.scrollTop = ++pageDom;
    };
});

实现原理:出现上述情况,手动下拉页面,页面会恢复正常。所以,在input的blur事件中监听软键盘收起,js模拟手动下拉。前提,body本身没有滚动。
滚动距离要动态的,多个input时相同scrollTop会失败,相当于没有滚动.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/58720.html

相关文章

  • 微信6.7.4版本ios 键盘上去页面 收起键盘页面下去bug修复

    摘要:微信版本出现的问题,用户输入时,软键盘弹出。收起软键盘的时候,页面下部软键盘原来位置会变成一片空白区域,页面没有恢复原状。实现原理出现上述情况,手动下拉页面,页面会恢复正常。所以,在的事件中监听软键盘收起,模拟手动下拉。前提,本身没有滚动。 iphone微信6.7.4版本出现的问题,用户输入时,软键盘弹出。收起软键盘的时候,页面下部软键盘原来位置会变成一片空白区域,页面没有恢复原状。 ...

    Sanchi 评论0 收藏0
  • 可能这些是你想要的H5软键盘兼容方案

    摘要:然而,并没有直接监听软键盘的原生事件,只能通过软键盘弹起或收起,引发页面其他方面的表现间接监听,曲线救国。软键盘收起表现触发输入框以外的区域时,输入框失去焦点,软键盘收起。可以让软键盘弹起后,让焦点元素再次滚到可视区,强迫滚到位。 前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上。需求很明确,看似很简单,其实不然。从...

    stackvoid 评论0 收藏0
  • 可能这些是你想要的H5软键盘兼容方案

    摘要:然而,并没有直接监听软键盘的原生事件,只能通过软键盘弹起或收起,引发页面其他方面的表现间接监听,曲线救国。软键盘收起表现触发输入框以外的区域时,输入框失去焦点,软键盘收起。可以让软键盘弹起后,让焦点元素再次滚到可视区,强迫滚到位。 前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上。需求很明确,看似很简单,其实不然。从...

    imingyu 评论0 收藏0
  • vue 手机键盘把底部按钮上去

    摘要:背景在写提交订单页面时候,底部按钮当我点击输入留言信息的时候,底部提交订单按钮被输入法软键盘顶上去遮挡住了。原来的样式主要是当输入法点击出现时候修改为绑定动态,,通过来显示动态显示,初始值设置另外设置初始屏幕高度变化屏幕高度。 背景:在写提交订单页面时候,底部按钮当我点击输入留言信息的时候,底部提交订单按钮被输入法软键盘顶上去遮挡住了。 showImg(https://segmentf...

    jiekechoo 评论0 收藏0
  • iOS设备下,h5的input框失焦页面起来一部分bug解决

    摘要:在之后,的框失焦后页面会出现被顶上去一部分的下面就来看下怎么解决这个,首先我们必须知道这两个方法软键盘弹起事件软键盘关闭事件。 在iOS12之后,h5的input框失焦后页面会出现被顶上去一部分的bug,下面就来看下怎么解决这个bug,首先我们必须知道这两个方法focusin(软键盘弹起事件)、focusout(软键盘关闭事件)。注意:这里的input框的位置是在页面的底部 废话不多说...

    xiguadada 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<