微信开发安卓虚拟键盘挡住输入框的问题
- <script type= "text/javascript">
- // 防止内容区域滚到底后引起页面整体的滚动
- var content = document.querySelector( 'main');
- var startY;
- content.addEventListener( 'touchstart', function (e) {
- //起始位置
- startY = e.touches[ 0].clientY;
- });
- content.addEventListener( 'touchmove', function (e) {
- // 高位表示向上滚动
- // 底位表示向下滚动
- // 1容许 0禁止
- var status = '11';
- var ele = this;
- //当前位置
- var currentY = e.touches[ 0].clientY;
- //如果垂直偏移量scrollTop为0,说明要么内容小于容器没有滚动条,要么大于容器但滚动条在顶部
- if (ele.scrollTop === 0) {
- // 如果内容小于容器则同时禁止上下滚动,若大于则可以向下滚动
- status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01';
- } else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) {
- /*
- 1.垂直偏移量scrollTop+整个元素的尺寸offsetHeight(包括边框)=整个内容区域scrollHeight
- 证明已经滚到底部了只能向上滚动;
- 2.其中offsetHeight(包括边框)是否要换成clientHeight(不包括边框)?
- */
- status = '10';
- }
- //若status==11则上面三种情况都不是,这种情况是有滚动条且滚动条不在顶部也不在底部
- if (status != '11') {
- // 判断当前的滚动方向
- var direction = currentY - startY > 0 ? '10' : '01';
- /*
- 1.操作方向和当前允许状态求与运算,运算结果为0,就说明不允许该方向滚动,则禁止默认事件,阻止滚动
- 2.status为00,说明没有滚动条,此时无论direction是上还是下,都要阻止滚动
- 3.status为01,说明有滚动条,可以向下滚动,此时direction为01则符合向下滚动
- 4.status为10,说明有滚动条,可以向上滚动,此时direction为10则符合向上滚动
- 5.综上a.没有滚动条 b.滚动条在顶部但还向上滚动 c.滚动条在底部但还向下滚动 都要阻止滚动
- */
- if (!( parseInt(status, 2) & parseInt(direction, 2))) {
- stopEvent(e);
- }
- }
- });
- </script>
这里用到了HTML5的touch事件,分别 touch事件有四个: touchstart、touchmove、touchend、touchcancel。当你滑动屏幕的时候,他们的触发顺序是:
微信开发安卓虚拟键盘挡住输入框的问题相关推荐
- 【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件...
问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图 解决方法: html: <input type=&quo ...
- 虚拟键盘挡住输入框的问题
我是用vant的组件van-field <van-fieldv-model="driveRegisterInfo.driverLicenseName"placeholder= ...
- h5开发安卓机型点击输入框调起输入法,输入框被键盘遮挡的解决方法
h5开发安卓机型点击输入框调起输入法,输入框被键盘遮挡的解决方法 参考文章: (1)h5开发安卓机型点击输入框调起输入法,输入框被键盘遮挡的解决方法 (2)https://www.cnblogs.co ...
- android 键盘遮盖输入框_Android各种键盘挡住输入框解决办法
原标题:Android各种键盘挡住输入框解决办法 今日科技快讯 C919大型客机首飞成功,让很多人激动不已.然而近日网上也出现了一些不同的声音:说这架飞机许多部件都是进口货,甚至有人说C919中国人只 ...
- 5种方法完美解决android软键盘挡住输入框方法详解
版权声明:本文为CSDN博主「潇潇凤儿」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/smileiam/ ...
- android 键盘遮盖输入框_各种键盘挡住输入框终极解决办法
对于键盘挡住输入框,给出了多种方案,希望对大家有所帮助. 在开发中,经常会遇到键盘挡住输入框的情况,比如登录界面或注册界面,弹出的软键盘把登录或注册按钮挡住了,用户必须把软键盘收起,才能点击相应按钮, ...
- Android爬坑之旅:软键盘挡住输入框问题的终极解决方式
本文由BarryZhang原创,同一时候首发于diycode.cc.barryzhang.com .github.com/barryhappy.非商业转载请注明作者和原文链接. 前言 开发做得久了.总 ...
- Android爬坑之旅:软键盘挡住输入框问题的终极解决方案
前言 开发做得久了,总免不了会遇到各种坑. 而在Android开发的路上,『软键盘挡住了输入框』这个坑,可谓是一个旷日持久的巨坑--来来来,我们慢慢看. 入门篇 Base 最基本的情况,如图所示:在页 ...
- 软键盘挡住输入框问题的终极解决方案
作者:腾儿飞 链接:https://www.jianshu.com/p/306482e17080 来源:简书 前言 开发做得久了,总免不了会遇到各种坑. 而在Android开发的路上,『软键盘挡住了输 ...
最新文章
- django model filter_Django框架使用流程(四)
- mysql if exists 数据表_使用IF NOT EXISTS创建数据表
- unity3d Vector3.Lerp解析
- vue2.0 子组件和父组件之间的传值
- 在线rss阅读聚合器lilina-0.7安装笔记
- excel中怎样用公式获取表单控件_老会计不愿教的工资表汇总公式,真是太好用了...
- ueditor上传图片回调_springboot+mybatis+oss整合ueditor
- SAP License:SAP RKE_HZSTMP标准时间转EXCEL日期方法
- Linux修改终端提示符
- mindray心电监护仪使用说明_界面张力仪的使用步骤以及画面清晰度相关说明
- LeetCode 300. 最长上升子序列(动态规划)
- Hbuilder+模拟器,调试App网络连接失败
- 2014,为了梦想宁愿破釜沉舟
- 推荐两个适合程序员接国外私单的网站
- 微博Jquery案例
- 会说话的汤姆猫纪念徽章藏品上线,集齐赢实物盲盒!
- 湖北工程学院计算机基础实验报告,学院圆满举行2019级《计算机应用基础》 第一批线上测试试点工作...
- P3918 [国家集训队]特技飞行
- 1503 Problem A 最简分式
- 靶机测试-bulldog
热门文章
- python哪里最难用_Python里最难的Asyncio,这里有一份非常适合小白的教程
- 在Word、WPS中插入AxMath公式导致行间距异常的解决办法
- Java基础-22总结登录注册IO版,数据操作流,内存操作流,打印流,标准输入输出流,转换流,随机访问流,合并流,序列化流,Properties...
- python用pandas读取excel指定列_Python用Pandas读写Excel
- Python经典例题:跑马灯文字效应
- VMware如何导出和导入OVF文件
- LeetCode Day01:一年中的第几天
- springBoot企业微信引入会话存档SDK
- 计算概论(一)计算起源、图灵机、计算原理
- python3下载m3u8转mp4_Python3.6:根据m3u8下载mp4视频