微信H5页面 会被软键盘顶起来
问题描述: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页面 会被软键盘顶起来的更多相关文章
- H5页面关于android软键盘弹出顶起底部元素的解决方案
应用场景:用div在移动端页面设置一个底部工具栏,css的代码大概如下: .tool{ width: 100%; height: 60px; position: fixed; left: 0px; b ...
- android手机的微信H5弹出的软键盘挡住了文本框,如何解决?
window.addEventListener("resize", function () { if (document.activeElement.tagName == &quo ...
- 微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法(转)
最近在做微信公众号的内嵌页面,发现点击输入框时键盘盖住文本框,找到一段代码解决了这个问题. iOS和android手机都已亲测,需要的可以直接拷贝到代码中使用. js代码如下: $(function ...
- 微信H5页面前端开发,大多数人都会遇到的几个兼容性坑
最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. 1.ios端兼容input光标高度 问题详情描述:input ...
- 页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景
微信浏览器在版本6.7.4及以上会有这个bug:页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景,触摸到滚动条会消失恢复! 解决代码 后台框架嵌入iframe的情景,iframe内部 ...
- C#开发微信门户及应用(44)--微信H5页面开发的经验总结
在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...
- 领导让我重新做一个微信H5页面!
leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...
- js-禁止微信H5页面点击右上角菜单时出现“复制链接”,且分享仅支持微信分享
禁止微信H5页面点击右上角菜单时出现“复制链接”,这个问题已经影响到我很久很久了,起码有2年了, 昨天写H5活动的时候,需求有一个是:可分享,但是禁止复制活动链接, 这一下,就逼我务必好好研究研究了. ...
- 微信h5页面调用第三方位置导航
微信h5页面拉起第三方导航应用 需要准备的: 通过微信认证的公众号有备案过的域名 背景:微信公众号点击菜单栏跳到h5页面,需要用到导航功能 需求:当用户点击导航按钮时,跳转到第三方app进行导航 参考 ...
随机推荐
- 8天入门docker系列 —— 第二天 通过一个aspnetcore程序加深对容器的理解
我们知道容器是一个打包了应用和相关依赖的盒子,那怎么去操控这个盒子呢? 这一篇我通过一个简单的aspnetcore程序来加深对盒子的理解,使用之前先 安装一下Docker的环境. 一:Docker的安 ...
- 痞子衡嵌入式:超级好用的可视化PyQt GUI构建工具(Qt Designer)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是PyQt GUI构建工具Qt Designer. 痞子衡开博客至今已有好几年,一直以嵌入式开发相关主题的文章为主线,偶尔穿插一些其他技术 ...
- SQL 横转竖 、竖专横(转载) 列转行 行转列
普通行列转换 问题:假设有张学生成绩表(tb)如下: 姓名 课程 分数 张三 语文 张三 数学 张三 物理 李四 语文 李四 数学 李四 物理 想变成(得到如下结果): 姓名 语文 数学 物理 --- ...
- 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 ...
- SuperMap iObject入门开发系列之五管线属性查询
本文是一位好友“托马斯”授权给我来发表的,介绍都是他的研究成果,在此,非常感谢. 管线属性查询功能针对单一管线图层进行特定的条件查询,然后将查询结果输出为列表,并添加点位闪烁功能,例如查询污水管线中, ...
- Android注解框架实战-ButterKnife
文章大纲 Android注解框架介绍 ButterKnife实战 项目源码下载 一.框架介绍 为什么要用注解框架? 在Android开发过程中,我们经常性地需要操作组件,操作方法有findVie ...
- GreenDao的初次使用--号称Android最快的关系型数据库
一.准备工作 1.项目build.gradle文件下的dependencies中引入插件: classpath 'org.greenrobot:greendao-gradle-plugin:3.2.1 ...
- 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 第二步, ...
- Windows下安装lxml库方法
如果直接用pip install lxml安装成功,那么恭喜!!! 一般在windows安装都十分蛋疼,pip无法直接安装(提示错误一大片,此处省略……) 因此选择wheel安装方式,步骤如下: 1. ...
- Storm入门(十)Twitter Storm: Transactional Topolgoy简介
作者: xumingming | 可以转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明网址: http://xumingming.sinaapp.com/736/twitter-stor ...