h5中ios输入框和键盘兼容性优化的示例分析-创新互联
这篇文章给大家分享的是有关h5中ios输入框和键盘兼容性优化的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
创新互联公司自成立以来，一直致力于为企业提供从网站策划、网站设计、成都网站制作、成都做网站、电子商务、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。公司拥有丰富的网站建设和互联网应用系统开发管理经验、成熟的应用系统解决方案、优秀的网站开发工程师团队及专业的网站设计师团队。
业务场景
固定在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）
后续问题
当然，这个解决方案智能解决部分机型的问题，要真正解决这个问题还是要依靠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输入框和键盘兼容性优化的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享文章：h5中ios输入框和键盘兼容性优化的示例分析-创新互联
本文地址：
http://cdxtjz.cn/article/djioji.html
