移动web 键盘挡住输入框
来源:互联网 发布:amf数据分析器 v22 编辑:程序博客网 时间:2024/06/05 10:50
这两天在做移动端开发,做的时候遇到一点小问题,就是用户准备输入的时候,由于软键盘的弹出,而遮挡住了输入框,很不好的用户体验,上网搜了很久, 感觉都不靠谱,一番琢磨之后有了眉头,这里大致说一下。
首先,初始状态是这样,这里我们要点击输入框了
这里点击输入框,页面变成了这个样子
可是,其实我们想要的一般是这个样子
那么,如何才能消除这个BUG呢?原来在楼主写前端的时候,把页面高度,定义成了100%,如果我们换成一个固定的像素值,那么键盘出来的时候,页面就会自动上移,把输入框露出来啦~如果页面高度不好修改,可以用输入框的focus暂时性的把高度定义为像素值,blur又改回来。
注意! 由于各手机分辨率不一定相同,最好是获取window.screen.height值,然后改成对应的像素值,否则可能造成页面的截断或者大部分留白
阅读全文
0 0
- 移动web 键盘挡住输入框
- 移动端输入框被手机键盘挡住
- 移动端点击输入框 input被弹出键盘挡住
- 当键盘挡住输入框的时候让输入框往上移动
- [Phonegap+Sencha Touch] 移动开发68 Sencha Touch弹出键盘挡住输入框的解决办法
- 移动端 ios键盘挡住底部 输入框的问题完美解决方案
- Android:键盘挡住输入框解决办法
- Android:键盘挡住输入框解决办法
- 输入框挡住键盘的解决办法
- 键盘挡住输入框的处理方法
- 不让键盘挡住Textfield输入框
- iOS键盘问题之挡住输入框
- 解决键盘挡住输入框的问题
- 键盘挡住了输入框的解决方法
- Android:键盘挡住输入框解决办法
- iOS 键盘挡住输入框的解决办法
- 键盘挡住输入框的问题
- Android:键盘挡住输入框解决办法
- java NIO系列教程(十二)
- Nginx日志中字段解析——正则表达式
- Eclipse 关闭 XML 文件验证的方法
- python学习笔记(数据类型)
- 详解Glide图片加载库常用方法
- 移动web 键盘挡住输入框
- day04
- java并发-线程池总结
- HI3515海思开发板移植3G模块笔记
- DataOutputStream的相关方法以及如何读出需要的内容
- android 判断 wifi 是否是 5G
- 深入理解log机制
- java保存JFrame窗口的内容为图片
- UVA 1600 Patrol Robot bfs