文档章节

input在微信上失去焦点页面不回弹问题

Chason-洪
 Chason-洪
发布于 03/04 10:44
字数 176
阅读 55
收藏 0
iOS

web页面在IOS微信上,遇到:当input失去焦点且软键盘收起来的时候,页面没有回弹,导致下面空出一个软键盘大小的高度。

解决方案

function isWeiXinAndIos{
    let ua = '' + window.navigator.userAgent.toLowerCase()
    let isWeixin = /MicroMessenger/i.test(ua)
    let isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua)
    return isWeixin && isIos
}

function  weChatInputBug(){
    let myFunction
    let isWXAndIos =isWeiXinAndIos();
    if (isWXAndIos) {
      document.body.addEventListener('focusin', () => {
        clearTimeout(myFunction)
      })
      document.body.addEventListener('focusout', () => {
        clearTimeout(myFunction)
        myFunction = setTimeout(function() {
          window.scrollTo({top: 0, left: 0, behavior: 'smooth'})
        }, 200)
      });
    }

  }

 

© 著作权归作者所有

上一篇: web版手写输入法
下一篇: electron-vue调用dll
Chason-洪
粉丝 13
博文 40
码字总数 30687
作品 0
漳州
程序员
私信 提问
input 标签的监听事件总结

最近在写一个手机端提交表单的项目,里面用了不少input标签,因为项目不太忙,所以,想做的完美点,但是遇到了一些问题,比如:页面中的必填项如果有至少一项为空,提交按钮就是不能提交的状...

上官夏洛特
2018/06/27
31
0
jq的validate插件验证时机问题

设置了失去焦点时触发验证,页面中给input输入框和select选择框加了required属性,进入页面点击一下空白的地方,select马上触发了校验给出了提示。为什么我还没有选择select框,它就触发了失...

TheFlash
2015/05/15
964
0
高手进!失去焦点的小问题!

文本框失去焦点触发保存,就实现这么简单的一个功能,我用的是jquery的blur,如下: $('input[name=groupName]').live("blur",function(){ //保存操作 }); 我的问题是: 在页面点击任意元素都...

高宏伟
2013/04/06
165
1
移动端解决input获取焦点软键盘弹出影响定位的问题

这是刚做前端时候写的文章,拿到简书上做记录吧!以免以后再遇到这样的坑。 在最近的一次H5页面开发中,发现在安卓端点击输入框的时候虚拟键盘会把最下边的‘保存’按钮顶上去。 在试了很多方...

愿爱无忧dk_
2018/05/25
0
0
监听input输入框的失去焦点事件与按钮点击事件执行的顺序问题

1.问题描述 当在监听input失去焦点的事件的时候,在input输入框输入一段文字之后,点击发送按钮会发现,只触发了失去焦点事件,按钮点击事件并没有被触发,当再次点击按钮的时候,事件才会被...

爱喝水的小熊
2018/06/01
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
551
10
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
32
0
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
17
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
52
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
58
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部