h5如何动态获取键盘高度_H5 键盘兼容性小结

最新推荐文章于 2024-08-01 04:35:22 发布

低调王子

最新推荐文章于 2024-08-01 04:35:22 发布

阅读量4.5k

点赞数 1

文章标签： h5如何动态获取键盘高度

本文链接：https://blog.csdn.net/weixin_42449311/article/details/113001357

版权

本文探讨了H5中输入框触发键盘弹出时，iOS和Android设备上的不同表现，以及如何通过监听事件和调整布局来处理键盘弹起和收起的兼容性问题。在iOS上，键盘弹出时页面可滚动，Android则可能改变webview高度。文中提供了针对不同系统的解决方案，包括监听focus和blur事件，以及通过window.resize事件判断键盘状态。

摘要由CSDN通过智能技术生成

在 H5 项目中，我们会经常遇到页面中存在单个甚至多个 input/textarea 输入框与底部固定元素的布局情况。在 input/textarea 输入框获取焦点时，会自动触发键盘弹起，而键盘弹出在 ios 与 android 的 webview 中表现并非一致，同时当我们主动触发键盘收起时也同样存在差异化。而无论如何，我们希望功能流畅的同时，尽量保持用户体验的一致性，因此有了下面一系列兼容性问题的研究。

1. 键盘弹出的不同表现IOS：IOS 的键盘处在窗口的最上层，当键盘弹起时，webview 的高度 height 并没有改变，只是 scrollTop 发生变化，页面可以滚动。且页面可以滚动的最大限度为弹出的键盘的高度，而只有键盘弹出时页面恰好也滚动到最底部时，scrollTop 的变化值为键盘的高度，其他情况下则无法获取。这就导致在 IOS 情况下难以获取键盘的真实高度。

Android: webview 中留出空间，该空间小于等于的键盘空间，变化的高度差会随着布局而不同，有的认为键盘高度 + 页面高度 = 原页面高度；是错误的误导，只有在某种很巧合的布局情况下才可套用此公式。

2. 键盘收起的不同表现IOS：触发键盘上的按钮收起键盘或者输入框以外的页面区域时，输入框会失去焦点，因此会触发输入框的 blur 事件。

Android: 触发键盘上的按钮收起键盘时，输入框并不会失去焦点，因此不会触发页面的 blur 事件；触发输入框以外的区域时，输入框会失去焦点，触发输入框的 blur 事件。

3. 监听键盘的弹出与收起

在 h5 中目前没有接口可以直