问题描述: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. 【转】超酷的 mip-infinitescroll 无限滚动(无限下拉)

    写在前面 无限滚动技术(又叫做无限下拉技术)被广泛应用于新闻类,图片预览类网站.对用户来讲,使用无限滚动的页面有源源不断的信息可以预览,增加用户在页面的停留时长.技术上原理也很简单,在页面加载时加载一 ...

  2. hive删除表和表中的数据

    hive删除表和表中的数据,以及按分区删除数据 hive删除表: drop table table_name; hive删除表中数据: truncate table table_name; hive按 ...

  3. 流程控制之if判断

    目录 语法(掌握) if if...else if...elif...else 练习(掌握) 练习1:成绩评判 练习2:模拟登录注册 if的嵌套(掌握) 语法(掌握) if判断是干什么的呢?if判断其 ...

  4. 彻底理解浏览器的缓存机制(http缓存机制)

    一.概述 浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下HTTP报文,HTTP报文分为两种: 同步s ...

  5. 开发小白也毫无压力的hexo静态博客建站全攻略 - 躺坑后亲诉心路历程

    目录 基本原理 方法1 - 本机Windows下建站 (力荐) 下载安装node.js 用管理员权限打开命令行,安装hexo-cli和hexo 下载安装git 初始化hexo 使用hexo gener ...

  6. 【原】javascript笔记之this用法

    javascript中的this学习起来相对复杂,最近花了点时间研究,总结起来大概这只有5种情况,相信只要熟悉这5种用法,基本是可以解决所有的this问题,文本不介绍this设计原理,只介绍用法,阅读 ...

  7. Asp.Net Core 轻松学-基于微服务的后台任务调度管理器

    前言     在 Asp.Net Core 中,我们常常使用 System.Threading.Timer 这个定时器去做一些需要长期在后台运行的任务,但是这个定时器在某些场合却不太灵光,而且常常无法 ...

  8. C# Array数组是引用类型

    在C#中值类型都是由System.ValueType的直接派生类,System.ValueType本身又是直接从System.Object派生的.派生的意思是‘利用继承机制,新的类可以从已有的类中生出 ...

  9. 交给子类: Template Method(模板方法模式)【PHP】

    Template Method(模板方法模式) ---- 将具体处理交给子类 Template Method 就是定义一个操作中的算法骨架,而将一些步骤延迟到子类中,使得子类可以不改变一个算法的结构可 ...

  10. 基于geoserver样式服务实现图层要素自定义配图

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 背景 在一般项目中,我们将geoserver样式服务中的SLD各参 ...