h5页面ios唤起软键盘踩坑

persistenceYL

已于 2025-02-07 05:16:51 修改

阅读量204

点赞数 1

文章标签：前端 javascript

于 2024-10-17 18:04:05 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42440314/article/details/143025074

版权

问题现象：

IOS，h5页面从录音页面点击输入框，键盘弹起时，会把输入框遮挡住，以下gif是加了滚动效果，滚到到输入框位置
在这里插入图片描述

出现问题满足的条件有以下几点：
1、输入框贴底
2、输入框从一个比键盘高的位置，要回到键盘高度的位置（录音界面弹起，点击输入框聚焦，键盘弹起时）
3、IOS打开该H5页面

出现该问题的原因：

无论是安卓还是IOS，输入框聚焦时，键盘弹起时，输入框应该跟随在键盘上方
不同设备针对webview的处理不相同：
安卓键盘弹起时，页面会被压缩，当内容过多时，会生成滚动条，窗口会执行resize事件，但ios不会
IOS键盘弹起时，不会压缩视图，键盘会占用一块区域，页面内容会往上顶。
所以导致当输入框从一个位置比较高的地方，进行输入框聚焦时，页面会滚动到最开始的位置，从而键盘挡住了输入框
在这里插入图片描述

解决过程：

1、使用键盘弹起前的innerHeight和键盘弹起后的innerHeight的差值计算出键盘的高度，但是因为ios键盘弹起时不是压缩webview，所以前后的innerHeight都是一样的。
2、使用文档高度减去视觉高度得到键盘的高度
在键盘弹起时，滚动键盘的高度，使得输入框位于键盘上方正好的位置

const viewportHeight = window.visualViewport.height
const documentHeight = document.documentElement.clientHeight
const keyboardHeight = documentHeight - viewportHeight
window.scrollTo(0, keyboardHeight)

需要注意的是，这步操作需要加一个600ms的延时器，因为得等键盘弹起时获取的视觉高度才是准确的。