HTML5 表单元素在 Android 下被软键盘遮挡
来源:互联网 发布:破特大网络贩枪案 编辑:程序博客网 时间:2024/05/17 21:06
发现问题
最近在工作项目中发现,html表单元素获得焦点时,移动端 Android 系统下自动弹出的软键盘会遮挡住表单元素。
这直接导致当页面高度在一屏以内,或表单元素无法通过滚动页面而移动时,用户无法在输入过程中看到元素本身内容。
这个问题在 IOS 下由于其自身的软键盘bug问题,反而不受影响。但很明显,这样的交互效果对于 Android 用户是很差的。
解决思路
发现这个问题后,我先尝试上网查询了一下大家遇到此类问题的解决办法,发现如果是原生app开发时可以通过设置 <activity>
标签定位属性来控制。但是对于 html 来讲,通过 js 控制软键盘比较困难。
继续查找后发现下面这篇帖子:
有没有对web移动端安卓键盘遮挡输入框一类的原理详细介绍的博客
因为 window.innerHeight
可以获得不计算软键盘在内的窗口高度,受其启发我尝试了更换思路。通过对比“元素的纵坐标(相对于窗口)”与“窗口高度(不计软键盘)”的大小,来控制元素的定位。
最终得到了较为满意的效果。
需要注意的是:
因为软键盘弹出是动画效果,所以需要设置
setTimeout
延迟获取window.innerHeight
。JS获取
offsetTop
属性是相对于父元素定位的,通常需要获取位置的元素都不是在最外层,而遍历上级元素的offset相关属性将导致影响脚本效率。这里使用浏览器接口getBoundingClientRect
更加高效。getBoundingClientRect
浏览器兼容性:Chrome Firefox Internet Explorer Opera Safari 1.0 3.0 (1.9) 4.0 (Yes) 4.0语法:
obj.getBoundingClientRect().top
;IE 中只能获得
left
、top
、botton
、right
的属性值,而现代浏览器还能获取到元素的width
和height
;bottom
&right
是元素底部(/右侧)相对于窗口顶部(/右侧)的距离,不是像css里面position的bottom相对于窗口底部。
参考文章:
CSSOM视图模式(CSSOM View Module)相关整理
js获取元素相对窗口位置的实现代码
- HTML5 表单元素在 Android 下被软键盘遮挡
- Android 软键盘遮挡
- Android软键盘被遮挡解决办法
- Android软键盘遮挡问题
- Android软键盘遮挡问题解决
- android 软键盘遮挡布局
- Android 软键盘遮挡Dialog
- Android 全屏模式下,解决 软键盘遮挡
- android弹出软键盘时,editText被遮挡的问题
- Android解决被软键盘遮挡的EditText问题
- Android 软键盘遮挡控件的解决办法
- Android软键盘隐藏,遮挡EidtText解决办法
- android软键盘遮挡输入框问题
- 【Android】解决软键盘遮挡登陆按钮
- Android软键盘遮挡的解决方案
- Android 软键盘遮挡三种解决方案
- android开发软键盘遮挡登陆按钮
- 【Android】解决软键盘遮挡登陆按钮
- CAShapeLayer
- play的模板语法
- 一个完整的Servlet需要哪些。
- TabLayout禁止选择
- OpenGL ES 纹理设置
- HTML5 表单元素在 Android 下被软键盘遮挡
- 198.Permutation Index II-排列序号II(中等题)
- 225. Implement Stack using Queues
- iOS 开发中你是否遇到这些经验问题
- 号码归属地的Jar包
- epoll的总结 LT和ET使用EPOLLONESHOT
- Jquery datatables 列过多,固定前两列保持不动
- MyBatis学习总结(四)——解决字段名与实体类属性名不相同的冲突
- JavaScript的三种弹窗消息框:alert+prompt+confirm 结合代码