虚拟键盘,移动web开发的痛
2024-10-18 18:18:27
原生APP的弹出虚拟键盘和收回虚拟键盘,输入框始终贴在虚拟键盘的上方。如下图:
如果移动端web也想做类似的功能,可以实现吗?
你可能会说着:“不就是放一个position: fixed;的输入框在页面底部嘛,有什么好难的?!”
当时我也是这么想的(⊙﹏⊙),但事实真的是这样吗?下面我们来看一些测试结果。
安卓4.2.1-qq浏览器,测试结果如下:
如图所示,输入框不见了。。。
再看看ios的safari:
为何又多了条白带?
还有,收起键盘后,为啥页面下移了。。。
好吧,其实这只是问题的冰山一角。
进入正题,怎么才能解决这些问题呢?
我们可以先从虚拟键盘入手,看看是否可以监听到呼出键盘、收回键盘这两个事件。
部分浏览器可以通过捕捉resize事件知道是否呼出收起虚拟键盘。
下面是测试的结果:
iPhone 5s iOS 8.2 :
(n表示不能触发resize事件,y表示能触发resize事件)
注意: ios的UC浏览器中,点击fixed定位的输入框,呼出键盘后无法输入。
Coolpad8720Q Andorid 4.2.1
那么监听focus和blur事件又如何呢?
用上述两台机器继续测试,结论如下:
- ios和安卓点击输入框都会触发focus事件
- ios的所有浏览器点击虚拟键盘的“完成“键或者其他方式收起键盘都会触发blur事件
- 安卓手机在点击”收起按钮“或者其他操作收起键盘的时候,没有触发blur事件,焦点还是在输入框上。
下面为测试截图
所以,可以采取如下方案做web评论发表框
1. 除评论框以外的元素都放在一个父元素,这里父元素是main。
<div class="main">
<img src="http://backtonaturedemo.github.io/frontend/case/keyborad/test.png" alt="">
<img src="http://backtonaturedemo.github.io/frontend/case/keyborad/test1.png" alt="">
</div>
2. 评论框和发布按钮放在一个div里
<div class="comment">
<div class="buttons">
<button class="sure cell">发表</button>
<button class="cancel cell">取消</button>
</div>
<textarea class="input" placeholder="我来说两句"></textarea>
</div>
注意: 需要在呼出键盘前,纪录下页面滚动条位置。
呼出键盘后,隐藏.main(除评论框以外的元素)。
撑高输入框,取消fixed,加入上外边距(给发表按钮留下位置)。
当输入框blur或点击取消,还原页面。
最新文章
- WebServices:WSDL的结构分析
- 域用户执行金蝶K/3报错解决方法
- Access应用笔记<;三>;
- Guava库
- 【USACO 1.3.4】牛式
- Linux学习笔记——怎样在交叉编译时使用共享库
- 谈谈培训机构的";骗局";给新人一些建议
- Opengl4.5 中文手册—C
- spring-boot配置静态资源映射的坑:properties文件不能添加注释
- ASP.NET core 2.1部署到 Centos 7
- LabVIEW 波形图表显示多条曲线
- mx:Label (标签)
- asp.net mvc 实现简单的实时消息推送
- nginx保持会话的方式
- amazeui+canvas绘制二维码
- 自带hyper -v 或者 Vmware安装Linux centos
- API接口规范
- 杭电OJ第11页2000-2009道题(C语言)
- FreeMaker常用方法
- php图片上传存储源码,可实现预览
热门文章
- 关于“找不到附属汇编 Microsoft.VC90.CRT,上一个错误是 参照的汇编没有安装在系统上。”的解决
- tracker-store and tracker-miner-fs eating up my CPU on every startup
- jQuery ui背景色动态渐变导航菜单
- Linux oracle 11g r2 安装前检查及安装
- localStorage点击次数存储
- SPOJ 1435 - Vertex Cover(树形DP,树的最小点覆盖)
- Android中API建议的方式实现SQLite数据库的增、删、改、查的操作
- IOS学习笔记06---C语言函数
- poj 2686 Traveling by Stagecoach ---状态压缩DP
- Web前端性能优化——高频触发事件的防抖