宜宾网站建设公司

h5中ios输入框和键盘兼容性优化的示例分析

这篇文章给大家分享的是有关h5中ios输入框和键盘兼容性优化的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

10年积累的成都网站建设、做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先制作网站后付款的网站建设流程，更有辽宁免费网站建设让你可以放心的选择与我们合作。

业务场景

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

无论是使用

还是

 
 

在聚焦事件触发调起原生键盘时，在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);
 }

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

感谢各位的阅读！关于“h5中ios输入框和键盘兼容性优化的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


本文标题：h5中ios输入框和键盘兼容性优化的示例分析
标题路径：http://hbruida.cn/article/ggjdej.html

其他资讯