H5移动端软键盘遮盖底部输入框方案

本文主要总结h5网页在ios不同版本上的表现及我的解决方案:

ios表现解决方案
11.1页面被顶起后回弹到底部没有触发scrollTop的改变,window.innerHeight没有改变,用户可以向上移动页面以获得输入框h5找不到方案解决,最终使用ios提供的方法获取到了键盘高度,使用定位固定到具体位置来解决
12.3.1页面整体上移,软键盘自动对齐页面底部,切换输入法导致覆盖输入框如不考虑用户体验可以不修改,优化切换输入法遮盖输入框方案:定时器
 document.body.scrollTop = document.body.scrollHeight 实时修改滚动的高度,blur时关闭定时器
13.1.3整体上移自动顶起input  失去焦点输入框消失且不能回落 切换键盘高度(不会导致可视区域改变) 消失或被遮盖使用window.scroll(0,0)解决无法回落问题;
切换输入法遮盖解决 scrollIntoView   
其他版本暂未测试scrollIntoViewIfNeeded、 scrollIntoView   、scrolltop 这三个方法基本都可以解决
Android 页面可能上移,也可能不移动,但是会触发window.innHeight的变化,可视区域改变可以通过初始的innerHeight 和 focus时候的innerHeight对比即可知道位置,但基本会自动顶起输入框

如果有朋友测试出其它版本的问题或者有更好的解决方案,欢迎指正

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值