ios 键盘弹起bug,出现的问题,光标穿透,页面无法点击
有时候使用ios输入键盘以后,直接点击页面按钮会出现事件无效。
解决方法:
1、 输入框输入后点击提交按钮后,弹窗会发现光标穿透问题
解决方法:
使用input blur()事件使input失去焦点
$('.btn').on('tap',function(){
$("input").blur();
})
2、事件失效
抬起键盘后点击页面弹出窗口后,事件失效,页面无交互,点击无效果,滑动以后才有能再次点击
解决方法:
侦听input事件失去焦点效果,然后修改body的scrollTop,具体数值可以自行修改。
$("input").blur(function(){
document.querySelector('body').scrollTop = 0;
});
ios 键盘弹起bug,出现的问题,光标穿透,页面无法点击的更多相关文章
- ios键盘弹起 body的高度拉长,页面底部空白问题。ios软键盘将页面抵到上面后,关闭软键盘页面不回弹的问题。
js 监听ios手机键盘弹起和收起的事件 /* js 监听ios手机键盘弹起和收起的事件 */ document.body.addEventListener('focusin', () => { ...
- ios 键盘弹起
#pragma mark 键盘弹起操作 - (void)keyboardWillShow:(NSNotification *)notification{ NSDictionary *info = ...
- 微信中使用popup等弹窗组件时点击输入框input键盘弹起导致IOS中按钮无效处理办法
因为在IOS微信中在弹窗中使用input使键盘弹起,使弹窗的位置上移,当键盘关闭时页面还在上面,弹窗位移量也在上面,只有下拉才能回到原位,这样弹窗也消失了.我的处理办法就是在键盘弹起和消失的时候,让页 ...
- 微信公众号页面的web页面键盘弹起问题
今天开发的过程中,遇到了一个小问题,是这样的, UI的设计稿中有个底部的按钮是相对于屏幕定位的,但是这个页面还有一个输入框:具体情况请看下图: 这就造成了当我们输入框获取焦点的时候,键盘弹起,下面的 ...
- H5软键盘弹起收回(IOS与Android)
IOS下中,软键盘处于窗口最顶层,与原有的窗口不冲突,所以底部导航条不会被顶起,但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口缩小,那么窗口内容自然要被挤: 解决办法: ...
- js 监听ios手机键盘弹起和收起的事件
document.body.addEventListener('focusin', () => { //软键盘弹起事件 console.log("键盘弹起") }) docu ...
- IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置
近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,这也是ios的微信版本更新6.7.4之后才遇到的bug. 目前 ...
- H5页面移动端IOS键盘收起焦点错位
出现场景:IOS端,在弹出层点击input时调起键盘页面会被顶上去document.body.scrollOffset大于0,收起键盘时scrollOffset不变,造成焦点错位. 注:安卓手机点击时 ...
- h5 移动端 监听软键盘弹起、收起
前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化window.onresize事件来做突破点的,但是io ...
随机推荐
- mybatis if判断两个值是否相等存在的坑啊
1.使用“==”比较 字符类型 的值 用“==”比较的使用场景: 不管你用的什么类型的变量,只要变量的值是字符类型就用“==” 产生原因: 在mybatis中如果<if>标签用一个“=”判 ...
- Vuex,从入门到...
Vuex 是什么? 官方是这么说的:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 不懂? ...
- oracle 11g 下载安装 使用记录
Oracle 11g 使用记录 1.下载oracle快捷安装版: (1)下载连接:https://pan.baidu.com/s/1ClC0hQepmTw2lSJ2ODtL7g 无提取码 (2)去 ...
- smartbits国产版本minismb – windows 10 用户界面无法正常显示
Minismb测试仪表是复刻smartbits的国产版本,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此工具测试任何ip网络设备的端口吞吐率,带宽,并发连接数和 ...
- BOM之window核心模块
Window对象包含以下五大核心:document,screen,navigator,history,location. 一 document 文档 document包含了浏览器对标准DOM实 ...
- JAVA设计模式-动态代理(Proxy)示例及说明
在Mybatis源码解析,一步一步从浅入深(五):mapper节点的解析文章的最后部分,我们提到了动态代理的概念,下面我们就简单了解一下动态代理. 一,概念 代理设计模式的目的就是在不直接操作对象的前 ...
- Regex分组与Pattern正则表达式对象
1.正则规则: 1.String regex = "[1-9]" 表示单个字符的取值范围是 1~9,注意是单个字符的取值范围 2 ...
- Scrapy项目 - 源码工程 - 实现豆瓣 Top250 电影信息爬取的爬虫设计
一.项目目录结构 spiders文件夹内包含doubanSpider.py文件,对于项目的构建以及结构逻辑,详见环境搭建篇. 二.项目源码 1.doubanSpider.py # -*- coding ...
- ubuntu13 eclipse菜单栏失效解决
使用ubuntu13安装完eclipse和myeclipse后发现菜单栏单击时不显示下拉框只能通过快捷键显示. 百度了一下,找到以下解决办法. 打开终端运行下面的命令,打开eclipse后可正常显示菜 ...
- CentOS7 搭建php环境
1,先安装apache: yum install httpd 配置ServerName,进入httpd.conf文件: vi /etc/httpd/conf/httpd.conf 将#ServerNa ...