WebAPP输入框被软键盘遮挡肿么办?

原创
2016/02/28 20:28
阅读数 3.5W

WebAPP输入框被软键盘遮挡肿么办?

当输入框处于半屏以下位置软键盘弹出时遇到的坑:
1.输入框被遮挡,看不见输入的内容
2.页面自动上移,但收回软键盘时页面少了一截
3.IOS系统上使用JRoll,IScroll等滑动方案时,光标不随输入框移动
4.软键盘弹出时窗口变小元素错位

解决方案
1、能不用滑动插件就不用。
2、IOS->使用overflow:auto;-webkit-overflow-scrolling;尽量避免使用JRoll等插件
3、Android->使用JRoll的fixedinput插件

 

建议从设计角度解决被遮挡的问题,见下文。

目前手机系统、浏览器系统众多,版本各异,表现诡异,兼容起来不比当年IE6轻松,麻辣个蛋,好不容易从PC开发跳到移动开发,还以为手机浏览器加了个-webkit前缀是万能的,握勒个去,谁知滑动卡顿、fixed走位、监听安卓返回键、某些机型focus唤不起软键盘、输入框被软键盘遮挡、安卓4.4以下不支持date等表单类型、滥用css3动画整个APP都不好了等等问题接踵而至,前端开发道远而任重啊~~呃。拿我最近的一个项目举个粟子。

对于设计师来说,表单理所当然一直往下排,但对于要实现功能的程序猿来说,苦逼啊。上图至少三屏才能显示完,输入框被软键盘遮挡不可避免,还要处理各种兼容问题,软键盘弹出时有的浏览器不改变窗口高度,有的改变窗口高度后索性不改回来了,键盘收回来时页面缩了一截,肿么办?

要从根源上解决这个问题,必须要让输入框不被遮挡,这就要从设计入手,修改设计有两种方案,一是分页处理,二是弹窗输入。

分页处理

绝不让输入框位于下半屏

   

   

   

弹窗输入

浮起来让你输个够

如果大家还有什么更好的方案,欢迎一起交流。

 转载请注明出处:http://my.oschina.net/cjlice/blog/625526

展开阅读全文
打赏
4
22 收藏
分享
加载中

引用来自“闲闲999”的评论

博主你好,我看了jroll的那个插件 解决安卓机被挡的情况,但是发现那个有个bug,在第一次点击出入框,确实是可以的,但是我什么都不输,第二次点击该输入框的时候就没有效果了,还是被挡住了
嗯,狠好,已在v1.0.2版修复该问题,新鲜出炉,去看看吧
2016/11/08 14:49
回复
举报
博主你好,我看了jroll的那个插件 解决安卓机被挡的情况,但是发现那个有个bug,在第一次点击出入框,确实是可以的,但是我什么都不输,第二次点击该输入框的时候就没有效果了,还是被挡住了
2016/11/08 11:45
回复
举报

引用来自“GinKo”的评论

怎么说呢。楼主的做法也是一种解决方案,但是一旦遇到一个表单数据不可分割,这种会造成不好的体验。
这种遮挡出现的情况是,页面元素超过屏幕(window)显示的区域,就会出现文本框不会跟随键盘上滚。
个人的解决方案是使用js滑动文本框位置;获得焦点上划,失去焦点则重新返回到原处。
参考
http://runjs.cn/code/pigebxdj

引用来自“BarZu”的评论

呃,是不是发错链接了?高端安卓机和苹果机在软件盘遮挡输入框时会自动滚动页面调整输入框位置使其可见。如果使用js去滑动页面,关键点在于如何判断浏览器有木有自动调整位置。如果双重调整,输入框就滚得老远了。

引用来自“GinKo”的评论

http://runjs.cn/detail/pigebxdj 抱歉,贴错链接了。。

引用来自“kongge”的评论

直接点击关闭键盘,不会触发blur,此时怎么处理?
此时无解。。。
2016/08/02 17:12
回复
举报

引用来自“GinKo”的评论

怎么说呢。楼主的做法也是一种解决方案,但是一旦遇到一个表单数据不可分割,这种会造成不好的体验。
这种遮挡出现的情况是,页面元素超过屏幕(window)显示的区域,就会出现文本框不会跟随键盘上滚。
个人的解决方案是使用js滑动文本框位置;获得焦点上划,失去焦点则重新返回到原处。
参考
http://runjs.cn/code/pigebxdj

引用来自“BarZu”的评论

呃,是不是发错链接了?高端安卓机和苹果机在软件盘遮挡输入框时会自动滚动页面调整输入框位置使其可见。如果使用js去滑动页面,关键点在于如何判断浏览器有木有自动调整位置。如果双重调整,输入框就滚得老远了。

引用来自“GinKo”的评论

http://runjs.cn/detail/pigebxdj 抱歉,贴错链接了。。
直接点击关闭键盘,不会触发blur,此时怎么处理?
2016/05/02 16:14
回复
举报

引用来自“GinKo”的评论

怎么说呢。楼主的做法也是一种解决方案,但是一旦遇到一个表单数据不可分割,这种会造成不好的体验。
这种遮挡出现的情况是,页面元素超过屏幕(window)显示的区域,就会出现文本框不会跟随键盘上滚。
个人的解决方案是使用js滑动文本框位置;获得焦点上划,失去焦点则重新返回到原处。
参考
http://runjs.cn/code/pigebxdj

引用来自“BarZu”的评论

呃,是不是发错链接了?高端安卓机和苹果机在软件盘遮挡输入框时会自动滚动页面调整输入框位置使其可见。如果使用js去滑动页面,关键点在于如何判断浏览器有木有自动调整位置。如果双重调整,输入框就滚得老远了。
http://runjs.cn/detail/pigebxdj 抱歉,贴错链接了。。
2016/03/01 17:13
回复
举报

引用来自“GinKo”的评论

怎么说呢。楼主的做法也是一种解决方案,但是一旦遇到一个表单数据不可分割,这种会造成不好的体验。
这种遮挡出现的情况是,页面元素超过屏幕(window)显示的区域,就会出现文本框不会跟随键盘上滚。
个人的解决方案是使用js滑动文本框位置;获得焦点上划,失去焦点则重新返回到原处。
参考
http://runjs.cn/code/pigebxdj
呃,是不是发错链接了?高端安卓机和苹果机在软件盘遮挡输入框时会自动滚动页面调整输入框位置使其可见。如果使用js去滑动页面,关键点在于如何判断浏览器有木有自动调整位置。如果双重调整,输入框就滚得老远了。
2016/03/01 12:50
回复
举报
怎么说呢。楼主的做法也是一种解决方案,但是一旦遇到一个表单数据不可分割,这种会造成不好的体验。
这种遮挡出现的情况是,页面元素超过屏幕(window)显示的区域,就会出现文本框不会跟随键盘上滚。
个人的解决方案是使用js滑动文本框位置;获得焦点上划,失去焦点则重新返回到原处。
参考
http://runjs.cn/code/pigebxdj
2016/03/01 12:35
回复
举报

引用来自“czpae86x”的评论

Android配置文件好像有键盘设置的,你查查
开发html5页面,在微信、微博、QQ等浏览器上运行,原生控件不受控制
2016/03/01 11:16
回复
举报
Android配置文件好像有键盘设置的,你查查
2016/03/01 11:13
回复
举报
平面设计师不合格,基本上没考虑手机端与pc端的不同。合格的设计师,键盘遮挡输入框是首要考虑的问题。
2016/02/29 10:19
回复
举报
更多评论
打赏
10 评论
22 收藏
4
分享
返回顶部
顶部