h5 ios输入框与键盘 兼容性优化

原由

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，官方的解释是 The Element.scrollIntoView() method scrolls the element on which it's called into the visible area of the browser window. 语法

element.scrollIntoView(); // 等同于element.scrollIntoView(true) 
element.scrollIntoView(alignToTop); // Boolean型参数 
element.scrollIntoView(scrollIntoViewOptions); // Object型参数
复制代码

参数

参数	说明	类型	可选值	默认值
alignToTop	--	boolean	---	false
scrollIntoViewOptions	--	object	--	--

{
    behavior: "auto"  | "instant" | "smooth",
    block:    "start" | "end",
}
复制代码

在can i use中查到的scrollIntoView的兼容性（主流浏览器中不考虑ie）

• Firefox 36 以上兼容
• chrome 61 以上兼容
• safiri 5.1开始 不兼容behavior中的smooth

后续问题

固然，这个解决方案智能解决部分机型的问题，要真正解决这个问题仍是要依靠native端。

在ios 和 安卓机型的问题

由于设置了这个定时任务，就会有一个后续的问题出现，也是在落地项目中有遇到过的，在此说明一下。

---

在上拉或下拉到头时，会出现背景白色的现象，由于有了这个定时器，它就会不断将视图拉回，致使页面抖动。 若是在app层作了webview禁止拖动的话就不会有这个问题，固然不能彻底依赖app，在程序中咱们也须要作此方面的兼容优化。

<div class="container" @touchStart="touchStart($event)" @touchEnd="touchEnd($event)">
    
    </div>
复制代码

touchStart(e) {
    this.clearTimer();
 },
 touchEnd(e) {
    this.repairIosInput();
 },
 clearTimer() {
     if(this.timer) {
         clearInterval(this.timer);
         this.timer = null;
     }else{
         return;
     }
 },
 repairIosInput() {
     if(this.timer) {
         return;
     }
     this.timer = setInterval(()=>{
          container.scrollIntoView({ 
            block: 'start',
            behavior: 'auto'
         })
     },300);
 }
复制代码

在开始拉动页面时清空定时器，中止拉动时开启定时器，这样就能够解决形成的抖动的问题了。

总结

作为一个老大难的问题，还会用更多的解决方案，请与我联系，一块儿讨论，早日脱坑！