问题描述:H5页面在微信中打开,input输入框获取焦点时,页面被软键盘顶上去;关闭软键盘时,页面不会自动下来(恢复初始状态)

H5页面在微信中初始状态如下图:

input输入框获取焦点时,页面被软键盘顶上去,如下图:

关闭软键盘时,页面没有自动落下,如下图:

解决方法:
方法一:

$(input).on('blur',function(){
    window.scroll(0,0);
});

scroll 注解:scroll(x,y),x表示水平滚动条位置,y表示垂直滚动条位置

方法二:

$("input").on(‘blur’,function(){
    $(window).scrollTop(0);
});

scrollTop 注解:元素滚动条的垂直位置

顺带写几个其他的:

scrollLeft(number); 元素滚动条的水平位置

$(selector).scrollTop(offset)  offset: 可选。规定相对滚动条顶部的偏移,以像素计。
---------------------

转载 :黑夜世界 
原文:https://blog.csdn.net/amy_king_0/article/details/86612901

微信H5页面 会被软键盘顶起来的更多相关文章

  1. H5页面关于android软键盘弹出顶起底部元素的解决方案

    应用场景:用div在移动端页面设置一个底部工具栏,css的代码大概如下: .tool{ width: 100%; height: 60px; position: fixed; left: 0px; b ...

  2. android手机的微信H5弹出的软键盘挡住了文本框,如何解决?

    window.addEventListener("resize", function () { if (document.activeElement.tagName == &quo ...

  3. 微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法(转)

    最近在做微信公众号的内嵌页面,发现点击输入框时键盘盖住文本框,找到一段代码解决了这个问题. iOS和android手机都已亲测,需要的可以直接拷贝到代码中使用. js代码如下: $(function ...

  4. 微信H5页面前端开发,大多数人都会遇到的几个兼容性坑

    最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. 1.ios端兼容input光标高度 问题详情描述:input ...

  5. 页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景

    微信浏览器在版本6.7.4及以上会有这个bug:页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景,触摸到滚动条会消失恢复! 解决代码 后台框架嵌入iframe的情景,iframe内部 ...

  6. C#开发微信门户及应用(44)--微信H5页面开发的经验总结

    在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...

  7. 领导让我重新做一个微信H5页面!

    leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...

  8. js-禁止微信H5页面点击右上角菜单时出现“复制链接”,且分享仅支持微信分享

    禁止微信H5页面点击右上角菜单时出现“复制链接”,这个问题已经影响到我很久很久了,起码有2年了, 昨天写H5活动的时候,需求有一个是:可分享,但是禁止复制活动链接, 这一下,就逼我务必好好研究研究了. ...

  9. 微信h5页面调用第三方位置导航

    微信h5页面拉起第三方导航应用 需要准备的: 通过微信认证的公众号有备案过的域名 背景:微信公众号点击菜单栏跳到h5页面,需要用到导航功能 需求:当用户点击导航按钮时,跳转到第三方app进行导航 参考 ...

随机推荐

  1. Spring Boot 定义系统启动任务,你会几种方式?

    在 Servlet/Jsp 项目中,如果涉及到系统任务,例如在项目启动阶段要做一些数据初始化操作,这些操作有一个共同的特点,只在项目启动时进行,以后都不再执行,这里,容易想到web基础中的三大组件( ...

  2. WPF获取原始控件样式。

    要获取WPF控件的原始样式,需要我们安装Blend for Visual Studio. 然后,我们打开Blend for Visual Studio,创建一个WPF项目. 然后,我们向页面拖动一个B ...

  3. linux文件权限总结(创建root不可以删除文件、只可追加的日志文件等)

    文件类型 对于文件和目录的访问权力是根据读访问,写访问,和执行访问来定义的. 我们来看一下 ls 命令的输出结果 [root@iZ28dr6w0qvZ test]# ls -l 总用量 72 -rw- ...

  4. java监听器简述

    监听器的概念 所谓监听器就是对内置对象的状态或者属性变化进行监听并且做出反应的特殊servlet,并且也需要在web.xml文件中进行相关配置. 内置对象的状态变化:初始化和销毁,也就是说当内置对象初 ...

  5. flex 布局实现固定头部和底部,中间滚动布局

    关键词:display: flex,flex: 1,  overflow-y: scroll; 实现:head 和footer 固定,中间body多了滚动,少了撑满: head和footer宽度根据内 ...

  6. openlayers4 入门开发系列之地图工具栏篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  7. 【工具】-RAP接口管理工具

    前言 RAP 是一个可视化接口管理工具, 通过分析接口结构,动态生成模拟数据,校验真实接口正确性, 围绕接口定义,通过一系列自动化工具提升我们的协作效率. 在 RAP 中,您可定义接口的 URL.请求 ...

  8. 解决Windows10运行VMware Workstation出现与Device Guard不兼容导致无法运行与创建虚拟机问题

    问题表现如下: 1.有Hyper-V功能未关闭的可能, 随便贴一个链接,网上一样的方法很多: https://jingyan.baidu.com/article/9f63fb916b50e1c8400 ...

  9. Window10升级遇到大坑错误代码:0xc000000e完美解决方案

    昨天忽然升级了,然后并没有立即重启更新,因为但是正在工作所以等下班回到家后就是一直提示:文件:\Windows\system32\winload.efi 错误代码:0xc000000e!!! 如下图所 ...

  10. JVM 学习(二)Java 内存模型、方法内联、逃逸 --- 2019年4月

    1.Java 的内存模型 定义了 happens-before,如果同一个线程中,字节码的先后顺序,后者观测了前者的运行结果,那么就会按顺序执行. Java 线程之间的通信由 Java 内存模型控制. ...