webview的输入及光标定位问题总结

前言

本文将围绕以下问题进行展开：

• 页面加载自动聚焦
• ios与Android机型软键盘表现差异很大，输入、换行问题兼容
• ios的页面滚动问题及占位文本的展示问题
• 如何更好地控制光标的位置

页面加载自动聚焦

说明： 这里说的是没有任何用户行为前，有用户操作的自动聚焦无需处理，本身支持。

首先，我们想到的是使用focus()来实现聚焦，然而，当在真机测试时却发现根本没效果

解决方案

ios手机

ios系统默认不支持事件自动聚焦，所以这个需要客户端同学的支持，使webview允许事件自动聚焦。

这样我们页面使用focus()会直接生效。

Android手机

安卓客户端的webview无法通过事件自动聚焦并拉起键盘，但是可以通过原生代码实现，添加原生方法：webview.requestFocus()

然后暴露给h5一个方法即可，在需要聚焦的地方直接调用。

关于ios和Android软键盘的表现

ios软键盘(如下左图)

• 输入框获取焦点，键盘弹起
• 页面并没有被压缩，或者说高度（height）没有改变
• 可见区发生了变化，即原页面高度-软键盘高度
• ios软键盘其实是脱离页面视图层的，可当作两层看，键盘对页面高度没有影响
• 软键盘收起，输入框失去焦点

Android软键盘（如下右图）

• 输入框获取焦点，键盘弹起
• 页面高度会发生改变
• 可视区同样发生变化
• 软键盘与页面共用一个视图层，整体高度固定，键盘弹起，页面自然被压缩
• 软键盘收起，输入框仍然聚焦

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jq95zniA-1656592274534)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3e79a0176354b009d69f3499e3a6bac~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ffvKAVnu-1656592274534)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b67822caced74e0d8c7533fa80b3822e~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

通过两端软键盘的表现，我们可以得知，键盘拉起，两端的可视区都发生了改变，即visualViewport发生了变化。

developer.mozilla.org/zh-CN/docs/…

通过下图可以比较清晰地看出两者的区别。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-626WX6XB-1656592274535)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6204fe5d45043578930f7cdfd4aa742~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)] ios的问题

• ios输入内容高度超过可视区时，页面不会自动滚动，导致超出区域被隐藏
• 输入框重新聚焦时，如果位于可视区内，则页面不动，但是如果聚焦位置超出可视区，页面会自动滚动，导致页面导航区域上移，影响交互体验。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fVkfqtNF-1656592274535)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/73b612e74fec43698ff0061fb82863b0~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qebuDgrQ-1656592274535)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/614ff5659146447a8a73e28953068362~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

Andorid的问题

• 连续输入多行，光标自动定位在最下方，输入框上移。🆗的
• 当再次聚焦时，光标被隐藏，无法自动定位到光标处并显示在可视区。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保