文档章节

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

BarZu
 BarZu
发布于 2016/02/28 20:28
字数 596
阅读 14544
收藏 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
粉丝 25
博文 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 记一次解决键盘遮挡问题

文章链接:https://mp.weixin.qq.com/s/1gkMtLu0BTXOUOj6isDjUw 日常android开发过程中,会遇到编辑框输入内容弹出软键盘,往往会出现键盘遮挡内容,或者出现页面整体上移的,或多或少在体验...

程序猿tx
12/09
0
0
Android 软键盘监听事件

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

丁佳辉
2015/10/16
64
0

没有更多内容

加载失败,请刷新页面

加载更多

Qt那些事0.0.15

以下与Q_DECLARE_METATYPE相关内容全部是翻译自Qt文档。参看QVariant Class | Qt Core 5.9以及QMetaType Class | Qt Core 5.9 QVariant QVariant::fromValue(const T& value) 返回一份包含v......

Ev4n
3分钟前
1
0
spring上传文件返回绝对路径,简单工具类

import com.google.common.io.Files;import lombok.extern.slf4j.Slf4j;import org.springframework.web.multipart.MultipartFile;import java.io.File;import java.io.IOExceptio......

Boss-x
15分钟前
1
0
1个开发如何撑起一个过亿用户的小程序

本文由云+社区发表 2018年12月,腾讯相册累计用户量突破1亿,月活1200万,阿拉丁指数排行 Top 30,已经成为小程序生态的重量级玩家。 三个多月来,腾讯相册围绕【在微信分享相册照片】这一核...

腾讯云加社区
21分钟前
6
0
golang ssh包使用方法介绍

在使用gexpect包发现很多问题之外,这里又尝试使用ssh user@127.0.0.1的思路进行用户切换。这里记录下具体的使用方法,遇到的ssh: must specify HostKeyCallback 问题的解法方法及最终使用过...

linuxprobe16
26分钟前
0
0
layer

Layui Layer在open弹出层中异步加载数据和form表单radio、checkbox、select不渲染,不可点击的解决办法 layer 实现弹窗提交信息 function confirmUpdateAward(i) { layer.open({ ...

mickelfeng
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部