h5 ios输入框和键盘的兼容性优化指南

2020-01-21 07:37:49刘景俊

起因

h5的输入框引起键盘导致体验不好,目前就算微信、知乎、百度等产品也没有很好的技术方案实现,尤其底部固定位置的输入框各种方案都用的前提下体验也并没有很好,这个问题也是老大难问题了。目前在准备一套与native协议 来解决这个问题,目前项目中的解决方案还是有值得借鉴的地方的,分享一下

下面话不多说了,来一起看看详细的介绍吧

业务场景

固定在h5页面底部的输入框

无论是使用


<input />

还是


 <div contenteditable="true">
 </div>

在聚焦事件触发调起原生键盘时,在ios部分机型(iphone 4s iphone 5等)上会使得键盘弹起后遮挡住输入框,使得用户体验不好。

目前的解决方案是写一个定时任务,在判定是ios打开页面时,执行以下函数


let timer = setInterval(()=>{
 // container 知道整个容器的dom节点
 container.scrollIntoView({ 
 block: 'start',
 behavior: 'auto'
 })
},300); //300毫秒是经过多次试验得到的数值,用户体验为佳

关于scrollIntoView

scrollIntoView这个API,官方的解释是