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 ...
随机推荐
- leetcode - 最小移动次数使数组元素相等
思路 (假设数组每次都已被排好序) 每次使得小于等于最大值的n-1的数字加1,直接暴力求解会超时 改进一: 为了让最小元素等于最大元素,至少需要数组中最大值-最小值次, 所以以此为基础再次暴力求解(参 ...
- CSS3动画animation认识,animate.css的使用
CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...
- Python语法基础之对象(字符串、列表、字典、元组)
转载自https://blog.csdn.net/lijinlon/article/details/81630154 字符串 String 定义:S = 'spam' 索引:S[0] = 's';S[ ...
- 线控性能比拼,MKZ与CRV作为自动驾驶开发平台的全面测评
全球自动驾驶创业公司最主流的测试开发用车是林肯MKZ,这是因为其高性能高精度的线控能力表现,易于使用逆向工程实现改装,以及存在成熟的线控改造服务提供商AS和Dataspeed,共同为自动驾驶初创及辅助 ...
- Spring Boot 的单元测试和集成测试
学习如何使用本教程中提供的工具,并在 Spring Boot 环境中编写单元测试和集成测试. 1. 概览 本文中,我们将了解如何编写单元测试并将其集成在 Spring Boot 环境中.你可在网上找到 ...
- Scrapy项目 - 实现腾讯网站社会招聘信息爬取的爬虫设计
通过使Scrapy框架,进行数据挖掘和对web站点页面提取结构化数据,掌握如何使用Twisted异步网络框架来处理网络通讯的问题,可以加快我们的下载速度,也可深入接触各种中间件接口,灵活的完成各种需求 ...
- Linux中安装传输的命令行工具
创建lrzsz目录: mkdir /usr/local/lrzsz 进入lrzsz目录: cd /usr/local/lrzsz 下载lrzsz压缩包: wget http://www.ohse.de ...
- 利用Python进行数据分析:【IPython】
一.IPython基础功能 1.IPython是交互式的Python命令行2.安装与使用 #安装:pip install ipython #使用:ipython与Python解释器的使用方法一致 注: ...
- Spring boot 梳理 -@SpringBootApplication、@EnableAutoConfiguration与(@EnableWebMVC、WebMvcConfigurationSupport,WebMvcConfigurer和WebMvcConfigurationAdapter)
@EnableWebMvc=继承DelegatingWebMvcConfiguration=继承WebMvcConfigurationSupport 直接看源码,@EnableWebMvc实际上引入一 ...
- MySQL-Access denied for user 'username'@'localhost' (using password: YES) 解决
使用navicat新建MySQL用户保存时提示 Access denied for user 'username'@'localhost' (using password: YES): 解决方法: 请 ...