原由

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型参数

参数

{
    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);
 }

在最先拉动页面时清空定时器，住手拉动时开启定时器，如许就能够处理形成的发抖的题目了。

总结

做为一个老大难的题目，还会用更多的处理计划，请与我联络，一同议论，早日脱坑！