h5底部输入框被键盘遮挡_移动端虚拟键盘引发的问题分析
在工作的过程中无论是与原生结合的Hybird的H5页面或者微信公众号页面都会遇到当触发键盘输入行为时,页面窗口往上离开屏幕(与iOS的适配)或者页面高度变小(在微信中打开页面等),现在我们来分析一下各种情况以及解决的方法。
iOS中页面往上顶的情况
// 兼容ios弹出键盘改变页面问题if (_browser.versions.ios) { //判断是否为ios环境 $('body').on("blur", 'input', function() { //用原生js的addEventListener也是可以的 setTimeout(function() { var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0)); }, 100); })};
Tips:
- _browser.versions.ios用于判断是否为ios环境,详情可见本人另一篇文章《判断环境为iOS或Android》,当然你也可以用你自己的判断方法。
- blur当在ios环境中,点击input或者textare都会触发虚拟键盘弹出以及改变页面高度,这时候当我们收起键盘时想要将页面高度还原就相当于当失去焦点的时候页面滚动回底部。(在最近一点版本的safair中我却发现页面会主动的还原,而微信公众号打开的页面却不会,这可能是新版的safair已经修复了这个问题,而微信的浏览器内核依旧是旧版本的safair内核)。
- setTimeout这个定时器是为了在页面恢复高度的时候显得更加平滑,这个看项目情况自主设置。
- 获取当前页面的滚动条纵坐标位置在标准w3c下,document.body.scrollTop恒为0,但是某些内核中又不含有document.documentElement.scrollTop,所以我们需要这样获取滚动条高度:var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
- window.scrollTo(xpos,ypos)
![](/assets/blank.gif)
- Math.max(scrollHeight - 1, 0)
防止取到null或者underfind
Android键盘遮挡输入框问题
//安卓键盘遮挡问题if (_browser.versions.android) { window.addEventListener("resize", function() { if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA"){ window.setTimeout(function() { document.activeElement.scrollIntoViewIfNeeded(); }, 0); } })};
Tips:
- resize为监听页面发生变化时触发的事件,这是应为Android弹出虚拟键盘的效果与ios是不一样的,Android相当于将窗口高度缩小,所以才不会像ios那样出现下面空白。
- document.activeElement此API为获取当前活动元素,包含聚焦。
- document.activeElement.scrollIntoViewIfNeeded();这个API的作用就是把绑定的元素移动到可见区域,当然要是你在ios中也有遮挡问题,也可以这么设置。
![](/assets/blank.gif)
h5底部输入框被键盘遮挡_移动端虚拟键盘引发的问题分析相关推荐
- 在浏览器端调试代码并直接修改原文件、移动端虚拟键盘中实现搜索按钮
在浏览器端调试代码并直接修改原文件: 此调试方法可以避免在浏览器调试完代码后在到原文件手动修改代码的弊端,其具体方法如下: 1.先将要调试的页面在浏览器(Google)打开,这里小编打开桌面test文 ...
- h5底部输入框被键盘遮挡_总结几个移动端H5软键盘的大坑【实践】
转载链接:https://segmentfault.com/a/1190000022115177 1.部分机型软键盘弹起挡住原来的视图 解决方法:可以通过监听移动端软键盘弹起 Element.scro ...
- h5底部输入框被键盘遮挡_H5 键盘兼容性小结
" 我们经常需要填写表单,键盘的行为存在各种差异." 在 H5 项目中,我们会经常遇到页面中存在单个甚至多个 input/textarea 输入框与底部固定元素的布局情况.在 in ...
- js手机键盘遮挡_完美解决手机网页中输入框被输入法遮挡的问题
之前要做一个弹出对话框,填写信息,发现在手机上看的时候,较后的输入框在填写信息时,输入框被输入法遮挡,只能盲填. 前提 1.弹出的对话框用display:fixed定位的 2.对话框大小固定 解决办法 ...
- 【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件...
问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图 解决方法: html: <input type=&quo ...
- vant 软键盘_移动端软键盘监听(弹出,收起),及影响定位布局的问题
移动端软键盘监听(弹出,收起),及影响定位布局的问题 一:移动端软键盘监听(弹出,收起) 1.监听resize ( Android) var winHeight = $(window).height( ...
- 客制化键盘编程_客制化键盘如何入坑?
首先,玩客制化键盘之前你得了解一些键盘相关的知识. 比如键盘的轴体大致分为:线性轴.段落轴.声音轴.线性轴主要是类红轴,静音轴两大类.段落轴主要是类茶轴,类hp轴两大类.声音轴就是类青轴和类box白轴 ...
- 阿米洛键盘失灵_改变静电容键盘手感单一限制,阿米洛静电容机械轴V2上手
https://www.bilibili.com/video/BV1sT4y1L7Dv/ - b站视频 - 1.jpg (69.7 KB, 下载次数: 2) 阿米洛静电容机械轴V2上手 2020-8- ...
- 客制化键盘编程_客制化键盘QMK固件入门-修改keyboard和keymap
客制化键盘,这是一个巨大的坑,形形色色的轴体.外壳.PCB.数据线.键帽.灯效.音效甚至掌托,对于热爱DIY的玩家们来说,确实很吸引人,但再看看价格,只能打扰了.作为一只程序猿,想要玩客制化键盘又玩不 ...
最新文章
- union与struct的区别?
- 使用git提交项目到码云
- php 图片合成,PHP中多张图片合成一张图片例子
- 错误提示:java.lang.IllegalArgumentException解决方法
- R语言︱线性混合模型理论与案例探究(固定效应随机效应)
- 5分钟,带你创建一个智能电梯检测器模型
- [MAR DASCTF明御攻防赛]enjoyit_1
- 数格子算面积的方法_数方格在平面图形面积公式推导教学中的妙用
- apt-get update 更新失败----如何清除破损而且陈旧的PPA仓库 (W: Failed to fetch http://ppa.launchpad.net/jonathonf/pyt)
- matlab学霸表白公式,学霸的数学表白公式
- Deepin 系统安装NVIDIA
- EBP 和 ESP 详解
- [转]Windows Shell 编程 第七章
- 使用sklearn实现birch聚类分析
- 命令行参数输入特殊字符
- 找电影神器:根据台词对白查询出自哪部影片/动漫
- cv2 error - function not implemented
- Spring笔记9--Spring的三大重要配置(alias,bean,import)
- Linux medici2003版安装
- 深圳联嵌科技推荐:10个小习惯严重影响健康
热门文章
- PCIe 链路训练学习---------Training Sequence (TS1 TS2序列)
- 考虑分布式电源运行特性的有源配电网智能软开关SOP规划方法【IEEE33节点】(Matlab代码实现)
- 康柏v3322安装linux系统,SUN的服务器能安装Linux操作系统吗
- 用计算机录音,如何使用电脑中的录音功能
- 数据库sql语句的exists总结
- 【一步步学OpenGL 3】-《第一个三角形》
- jupyter notebook切换盘符
- linux编译对cpu要求,Linux系统中使用GCC CPU参数优化代码编译
- 输入年份,打印全年的日历。 每周的第一天应为星期日。 星期制在我国正式使用是清末(1905年),但其来源却是中外时间文化的殊途同归。古人观天象计时间除了最明显的日
- spyder一打开就卡了_保时捷透露了3款从未见过的概念车-一起来看看