h5 ios输入框与键盘 兼容性优化
起因
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型参数
参数
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
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);
}
在开始拉动页面时清空定时器,停止拉动时开启定时器,这样就可以解决造成的抖动的问题了。
总结
做为一个老大难的问题,还会用更多的解决方案,请与我联系,一起讨论,早日脱坑!
本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=h010hi2ik2j
h5 ios输入框与键盘 兼容性优化的更多相关文章
- 【转】IOS 输入框被键盘遮盖的解决方法
做IOS开发时,难免会遇到输入框被键盘遮掩的问题.上网上搜索了很多相关的解决方案,看了很多,但是由衷的觉得太麻烦了. 有的解决方案是将视图上的所有的东西都添加到一个滚动视图对象( UIScrollVi ...
- 【转】ios输入框被键盘挡住的解决办法
做IOS开发时,难免会遇到输入框被键盘遮掩的问题.上网上搜索了很多相关的解决方案,看了很多,但是由衷的觉得太麻烦了. 有的解决方案是将视图上的所有的东西都添加到一个滚动视图对象( UIScrollVi ...
- 在IOS输入框中 键盘上显示“搜索”
移动端web页面上使用软键盘时如何让其显示“前往”(GO)而不是换行?‘ 用一个 form 表单包裹住就会显示前往,单独的一个 input 就会提示换行.下面是测试地址: 有表单:https://js ...
- 移动端页面input输入框被键盘遮挡问题
<body class="layout-fixed"> <!-- fixed定位的头部 --> <header> </header> ...
- H5 键盘兼容性小结
H5 键盘兼容性小结 在 H5 项目中,我们会经常遇到页面中存在单个甚至多个 input/textarea 输入框与底部固定元素的布局情况.在 input/textarea 输入框获取焦点时,会自动触 ...
- 【转】swift实现ios类似微信输入框跟随键盘弹出的效果
swift实现ios类似微信输入框跟随键盘弹出的效果 为什么要做这个效果 在聊天app,例如微信中,你会注意到一个效果,就是在你点击输入框时输入框会跟随键盘一起向上弹出,当你点击其他地方时,输入框又会 ...
- Android软键盘弹出,覆盖h5页面输入框问题
之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位 ...
- ios上有时候提交按钮点击两次才可以取消输入框软键盘
ios上有时候提交按钮点击两次才可以取消输入框软键盘,点击第一次软键盘消失,点击第二次输入框页面消失,这样用户体验不好.我的做法是用 touchstart 代替click来处理 反应快,但是有时候会出 ...
- iOS开发之 - 键盘处理神器 IQKeyboardManager
平常在开发中,用到输入框的地方不胜其数,当输入框位于屏幕底部时,弹起的键盘很可能覆盖输入框,导致用户看不到输入结果,体验较差...... IQKeyboardManager 可以很简单快捷的解决键盘遮 ...
随机推荐
- Liunxa安装Nignx,Git
Linux安装Nignx 1.安装依赖 执行语句 yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel open ...
- Linux CentOS 7.X-关机、重启命令
一.命令操作 1.退出命令 退出登陆命令:logout: 2.关闭命令 立即关机:shutdown -h now(root用户) halt poweroff 延时关机:shutdown -h m ...
- k8s线上某些特殊情况强制删除 StatefulSet 的 Pod 要考虑什么隐患?
k8s线上某些特殊情况强制删除 StatefulSet 的 Pod 要考虑什么隐患? 考点之什么情况下,需要强制删除 StatefulSet 的 Pod? 考点之如果 StatefulSet 操作不当 ...
- laravel 7 登录
1:路由,展示登录表单 Route::group(['prefix'=>'day','namespace'=>'day18'],function (){ // 登录 Route::get( ...
- LGP1397题解
并不是那么的有意思呢 首先,我们可以将题目给出的地推式看做一个一次函数 \(k * x+b\),来思考一个问题,如果给出两个一次函数 \(F(x)\) 和 \(G(x)\),那么 \(F(G(x))\ ...
- k8s原来这么简单(一)核心组件与工作原理
k8s官方文档:https://kubernetes.io/zh/docs/home/ 前提 掌握容器技术:Docker,Containerd等 K8S优势 使用简单,少量人/小团队可以轻松维护大型 ...
- *****又错一道,不知道为啥。。。 ybt【例5.19】字符串判等
[题目描述] 判断两个由大小写字母和空格组成的字符串在忽略大小写,且忽略空格后是否相等. [输入] 两行,每行包含一个字符串. [输出] 若两个字符串相等,输出YES,否则输出NO. 代码我觉得没啥问 ...
- kubernetes关于证书配置得问题总结
总结证书配置 1.证书首先分为两种配置方式, 1) 一种是在集群中配置 2) 一种是在上游负载均衡中配置. 1)https证书在集群中配置,并域名直接解析到集群的ingress-nginx-contr ...
- [SPDK/NVMe存储技术分析]015 - 理解内存注册(Memory Registration)
使用RDMA, 必然关系到内存区域(Memory Region)的注册问题.在本文中,我们将以mlx5 HCA卡为例回答如下几个问题: 为什么需要注册内存区域? 注册内存区域有嘛好处? 注册内存区域的 ...
- spring学习一:spring入门及相关概念介绍
1:Spring的概念:(03年兴起) (1) 开源的轻量级的框架(无需复杂的环境,不依赖其他) (2) 一站式框架(Spring在javaee的三层结构中,对每一层都提供不同的解决技术: ...