文档章节

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

BarZu
 BarZu
发布于 2016/02/28 20:28
字数 596
阅读 14360
收藏 23

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

© 著作权归作者所有

共有 人打赏支持
BarZu
粉丝 12
博文 19
码字总数 10230
作品 3
广州
高级程序员
加载中

评论(10)

BarZu
BarZu

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

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

引用来自“GinKo”的评论

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

引用来自“BarZu”的评论

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

引用来自“GinKo”的评论

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

引用来自“kongge”的评论

直接点击关闭键盘,不会触发blur,此时怎么处理?
此时无解。。。
k
kongge

引用来自“GinKo”的评论

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

引用来自“BarZu”的评论

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

引用来自“GinKo”的评论

http://runjs.cn/detail/pigebxdj 抱歉,贴错链接了。。
直接点击关闭键盘,不会触发blur,此时怎么处理?
GinKo
GinKo

引用来自“GinKo”的评论

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

引用来自“BarZu”的评论

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

引用来自“GinKo”的评论

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

引用来自“czpae86x”的评论

Android配置文件好像有键盘设置的,你查查
开发html5页面,在微信、微博、QQ等浏览器上运行,原生控件不受控制
蔡蜘蛛侠
蔡蜘蛛侠
Android配置文件好像有键盘设置的,你查查
macgroup
macgroup
平面设计师不合格,基本上没考虑手机端与pc端的不同。合格的设计师,键盘遮挡输入框是首要考虑的问题。
input 输入框被软键盘遮挡问题

1.安卓手机 在软键盘被弹起来的时候输入框不被遮挡,支持性良好 2.ios手机 在软键盘被弹起来的时候输入框被遮挡,体验很不好 在经过多次实验发现,ios手机输入框被弹起的瞬间是不被遮挡的,过...

爱喝水的小熊
06/06
0
0
Android 输入法键盘和activity页面遮挡问题解决

相信大家在开发时会遇到弹出软键盘后,输入框上移就看不到输入框了,其实只要将Webview放到了ScrollView中,将ScrollView改为LinearLayout问题解决了,不会在弹出软键盘后大幅滚动。不过下面...

红豆与绿豆
2015/10/29
0
0
WebView 设置软键盘弹出将屏幕上移

项目开发中WebView界面弹出软键盘需要将屏幕上移,避免软键盘将输入框遮挡 1、在Activity中添加如下代码: getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFTINPUTADJUSTRESIZ...

Taian
2015/12/02
26
0
Android 软键盘监听事件

Android是一个针对触摸屏专门设计的操作系统,当点击编辑框,系统自动为用户弹出软键盘,以便用户进行输入。 那么,弹出软键盘后必然会造成原有布局高度的减少,那么系统应该如何来处理布局的...

丁佳辉
2015/10/16
64
0
Android软键盘的隐藏显示研究

Android是一个针对触摸屏专门设计的操作系统,当点击编辑框,系统自动为用户弹出软键盘,以便用户进行输入。 那么,弹出软键盘后必然会造成原有布局高度的减少,那么系统应该如何来处理布局的...

迷途d书童
2012/03/30
7K
0

没有更多内容

加载失败,请刷新页面

加载更多

HashTable

Hashtable 是一个散列表,它存储的内容是键值对(key-value)映射 Hashtable 继承于Dictionary,实现了Map、Cloneable、java.io.Serializable接口 Hashtable 的函数都是同步的,这意味着它是线...

职业搬砖20年
21分钟前
1
0
Linux系统状态查看命令1

10月23日任务 10.1 使用w查看系统负载 10.2 vmstat命令 10.3 top命令 10.4 sar命令 10.5 nload命令 查看系统负载 w命令 # 第一行:当前系统时间,系统启动时间,登录的用户,系统负载:1分钟...

robertt15
36分钟前
1
0
缓存那些事

前言 一般而言,现在互联网应用(网站或App)的整体流程,可以概括如图1所示,用户请求从界面(浏览器或App界面)到网络转发、应用服务再到存储(数据库或文件系统),然后返回到界面呈现内容...

Skqing
45分钟前
2
0
nginx开启stub_status模块配置方法

nginx开启stub_status模块配置方法 2017年12月13日 15:57:29 ly_dengle 阅读数:3765 标签: stub_statusnginxnginx开启stub_status模块 更多 个人分类: 软件工具php 版权声明:本文为博主原...

linjin200
52分钟前
3
0
挑逗 Java 程序员的那些 Scala 绝技

有个问题一直困扰着 Scala 社区,为什么一些 Java 开发者将 Scala 捧到了天上,认为它是来自上帝之吻的完美语言;而另外一些 Java 开发者却对它望而却步,认为它过于复杂而难以理解。同样是 ...

joymufeng
55分钟前
134
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部