起因
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 Windows.
语法
- 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);
- }
在开始拉动页面时清空定时器, 停止拉动时开启定时器, 这样就可以解决造成的抖动的问题了.
总结
做为一个老大难的问题, 还会用更多的解决方案, 请与我联系, 一起讨论, 早日脱坑!
来源: https://segmentfault.com/a/1190000017119824