问题描述: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. 8天入门docker系列 —— 第二天 通过一个aspnetcore程序加深对容器的理解

    我们知道容器是一个打包了应用和相关依赖的盒子,那怎么去操控这个盒子呢? 这一篇我通过一个简单的aspnetcore程序来加深对盒子的理解,使用之前先 安装一下Docker的环境. 一:Docker的安 ...

  2. 痞子衡嵌入式:超级好用的可视化PyQt GUI构建工具(Qt Designer)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是PyQt GUI构建工具Qt Designer. 痞子衡开博客至今已有好几年,一直以嵌入式开发相关主题的文章为主线,偶尔穿插一些其他技术 ...

  3. SQL 横转竖 、竖专横(转载) 列转行 行转列

    普通行列转换 问题:假设有张学生成绩表(tb)如下: 姓名 课程 分数 张三 语文 张三 数学 张三 物理 李四 语文 李四 数学 李四 物理 想变成(得到如下结果): 姓名 语文 数学 物理 --- ...

  4. SAP MM Storage Location Missing in MD04 Result?

    SAP MM Storage Location Missing in MD04 Result? Today I received a ticket from business team, a user ...

  5. SuperMap iObject入门开发系列之五管线属性查询

    本文是一位好友“托马斯”授权给我来发表的,介绍都是他的研究成果,在此,非常感谢. 管线属性查询功能针对单一管线图层进行特定的条件查询,然后将查询结果输出为列表,并添加点位闪烁功能,例如查询污水管线中, ...

  6. Android注解框架实战-ButterKnife

    文章大纲 Android注解框架介绍 ButterKnife实战 项目源码下载   一.框架介绍 为什么要用注解框架?  在Android开发过程中,我们经常性地需要操作组件,操作方法有findVie ...

  7. GreenDao的初次使用--号称Android最快的关系型数据库

    一.准备工作 1.项目build.gradle文件下的dependencies中引入插件: classpath 'org.greenrobot:greendao-gradle-plugin:3.2.1 ...

  8. Docker 创建 Crowd3.3.2 以及打通 Jira Software7.12.3和Confluence6.12.2 SSO 单点登录

    目录 目录 1.介绍 1.1.什么是Crowd? 2.Crowd 的官网在哪里? 3.如何下载安装? 4.对 Crowd 进行配置 4.1.破解 Crowd 第一步 4.2.破解 Crowd 第二步, ...

  9. Windows下安装lxml库方法

    如果直接用pip install lxml安装成功,那么恭喜!!! 一般在windows安装都十分蛋疼,pip无法直接安装(提示错误一大片,此处省略……) 因此选择wheel安装方式,步骤如下: 1. ...

  10. Storm入门(十)Twitter Storm: Transactional Topolgoy简介

    作者: xumingming | 可以转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明网址: http://xumingming.sinaapp.com/736/twitter-stor ...