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

shadajin 发布于2019-08-05 15:32 / 2474人阅读

摘要：在上拉或下拉到头时，会出现背景白色的现象，因为有了这个定时器，它就会不断将视图拉回，导致页面抖动。在开始拉动页面时清空定时器，停止拉动时开启定时器，这样就可以解决造成的抖动的问题了。

起因

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

业务场景 固定在h5页面底部的输入框

无论是使用

还是

在聚焦事件触发调起原生键盘时，在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，在程序中我们也需要做此方面的兼容优化。

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

在开始拉动页面时清空定时器，停止拉动时开启定时器，这样就可以解决造成的抖动的问题了。

总结

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

专线服务 idc机房托管键盘输入循环键盘输入禁止键盘输入模拟输入键盘

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/58599.html

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

摘要：在上拉或下拉到头时，会出现背景白色的现象，因为有了这个定时器，它就会不断将视图拉回，导致页面抖动。在开始拉动页面时清空定时器，停止拉动时开启定时器，这样就可以解决造成的抖动的问题了。起因 h5的输入框引起键盘导致体验不好，目前就算微信、知乎、百度等产品也没有很好的技术方案实现，尤其底部固定位置的输入框各种方案都用的前提下体验也并没有很好，这个问题也是老大难问题了。目前在准备一套与na...

sunny5541 2019-08-23 13:38 评论0 收藏0
h5 ios输入框与键盘 兼容性优化

摘要：在上拉或下拉到头时，会出现背景白色的现象，因为有了这个定时器，它就会不断将视图拉回，导致页面抖动。在开始拉动页面时清空定时器，停止拉动时开启定时器，这样就可以解决造成的抖动的问题了。起因 h5的输入框引起键盘导致体验不好，目前就算微信、知乎、百度等产品也没有很好的技术方案实现，尤其底部固定位置的输入框各种方案都用的前提下体验也并没有很好，这个问题也是老大难问题了。目前在准备一套与na...

Hegel_Gu 2019-06-25 17:02 评论0 收藏0
可能这些是你想要的H5软键盘兼容方案

摘要：然而，并没有直接监听软键盘的原生事件，只能通过软键盘弹起或收起，引发页面其他方面的表现间接监听，曲线救国。软键盘收起表现触发输入框以外的区域时，输入框失去焦点，软键盘收起。可以让软键盘弹起后，让焦点元素再次滚到可视区，强迫滚到位。前言最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从...

stackvoid 2019-08-23 17:05 评论0 收藏0
可能这些是你想要的H5软键盘兼容方案

摘要：然而，并没有直接监听软键盘的原生事件，只能通过软键盘弹起或收起，引发页面其他方面的表现间接监听，曲线救国。软键盘收起表现触发输入框以外的区域时，输入框失去焦点，软键盘收起。可以让软键盘弹起后，让焦点元素再次滚到可视区，强迫滚到位。前言最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从...

imingyu 2019-08-05 16:47 评论0 收藏0
移动端键盘和光标的兼容那点事

摘要：解决方法如果使用页面数据不超过一屏禁止滚动，那么即使变成了页面也不会有什么变化。作者：@micky思 @wupq @yewq 在H5的开发中，个人的制作页面布局习性不同，多多少少会产生在真机上input的光标和键盘的弹出会出现的各种BUG，文中整理了部分遇到的问题，欢迎新增 ios移动端输入框上浮导致输入位置偏移问题原因：遮罩层定位为fixed，当键盘弹起时，ios11以及以下...

XboxYan 2019-08-02 15:32 评论0 收藏0