有时候使用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,出现的问题,光标穿透,页面无法点击的更多相关文章

  1. ios键盘弹起 body的高度拉长,页面底部空白问题。ios软键盘将页面抵到上面后,关闭软键盘页面不回弹的问题。

    js 监听ios手机键盘弹起和收起的事件 /* js 监听ios手机键盘弹起和收起的事件 */ document.body.addEventListener('focusin', () => { ...

  2. ios 键盘弹起

    #pragma mark 键盘弹起操作 - (void)keyboardWillShow:(NSNotification *)notification{    NSDictionary *info = ...

  3. 微信中使用popup等弹窗组件时点击输入框input键盘弹起导致IOS中按钮无效处理办法

    因为在IOS微信中在弹窗中使用input使键盘弹起,使弹窗的位置上移,当键盘关闭时页面还在上面,弹窗位移量也在上面,只有下拉才能回到原位,这样弹窗也消失了.我的处理办法就是在键盘弹起和消失的时候,让页 ...

  4. 微信公众号页面的web页面键盘弹起问题

    今天开发的过程中,遇到了一个小问题,是这样的,  UI的设计稿中有个底部的按钮是相对于屏幕定位的,但是这个页面还有一个输入框:具体情况请看下图: 这就造成了当我们输入框获取焦点的时候,键盘弹起,下面的 ...

  5. H5软键盘弹起收回(IOS与Android)

    IOS下中,软键盘处于窗口最顶层,与原有的窗口不冲突,所以底部导航条不会被顶起,但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口缩小,那么窗口内容自然要被挤: 解决办法: ...

  6. js 监听ios手机键盘弹起和收起的事件

    document.body.addEventListener('focusin', () => { //软键盘弹起事件 console.log("键盘弹起") }) docu ...

  7. IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置

    近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,这也是ios的微信版本更新6.7.4之后才遇到的bug. 目前 ...

  8. H5页面移动端IOS键盘收起焦点错位

    出现场景:IOS端,在弹出层点击input时调起键盘页面会被顶上去document.body.scrollOffset大于0,收起键盘时scrollOffset不变,造成焦点错位. 注:安卓手机点击时 ...

  9. h5 移动端 监听软键盘弹起、收起

    前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化window.onresize事件来做突破点的,但是io ...

随机推荐

  1. 07-SQLServer数据库中的系统数据库

    一.总结 首先要明确SQLServer的系统数据库一共有5个:Master.Model.Msdb.Tempdb.Resource. 1.Master数据库 (1)master数据库记录了所有系统级别的 ...

  2. [Leetcode] 第306题 累加数

    一.题目描述 累加数是一个字符串,组成它的数字可以形成累加序列. 一个有效的累加序列必须至少包含 3 个数.除了最开始的两个数以外,字符串中的其他数都等于它之前两个数相加的和. 给定一个只包含数字 ' ...

  3. Django&,Flask&pyrthon原生sql语句 基本操作

    Django框架 ,Flask框架 ORM 以及pyrthon原生sql语句操作数据库 WHAT IS ORM? ORM( Object Relational Mapping) 对象关系映射 , 即通 ...

  4. 自己动手实现智能家居之树莓派GPIO简介(Python版)

    [前言] 一个热爱技术的人一定向往有一个科技感十足的环境吧,那何不亲自实践一下属于技术人的座右铭:“技术改变世界”. 就让我们一步步动手搭建一个属于自己的“智能家居平台”吧(不要对这个名词抬杠啦,技术 ...

  5. 记一次jmeter从txt文本获取数值并给测试计划的变量赋值,jmeter永久性修改变量。

    前言: 需要永久性的改变变量. 其实这个办法并不是最好的,但是是最容易实现的.后期可做成从数据库里直接取值. 赋值BeanShell import java.io.File; import java. ...

  6. Redis 集群(三)

    为什么为有集群 在 Redis3 版本之前,每台 Redis 机器需要存储所有 Redis key ,这要求每台 Redis 机器有足够大的内存 而且只能是主节点写,从节点读,对于高并发情况下会有性能 ...

  7. Maven 梳理 - 常用三种archetype说明

    archetype:原型的意思,可理解为Maven项目模板工具包 常用archetype 1.cocoon-22-archetype-webapp 2.maven-archetype-quicksta ...

  8. Angular 表单嵌套、动态表单

    说明: 组件使用了ng-zorro (https://ng.ant.design/docs/introduce/zh) 第一类:嵌套表单 1. 静态表单嵌套 demo.component.html & ...

  9. CSS技巧(1)· CSS渐变 linear-gradient

    前言: 不论在网页设计中,还是传统的媒介中,各种尺寸,颜色,角度的图案在视觉中无处不在,要想在网页中实现复杂的图案,其过程往往不够理想,过去,我们可以创建一个单独的位图文件,然后每次需要做调整的时候, ...

  10. Spark 学习笔记之 map/flatMap/filter/mapPartitions/mapPartitionsWithIndex/sample

    map/flatMap/filter/mapPartitions/mapPartitionsWithIndex/sample: