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

Android微信内置浏览H5页面,因为其中的文本输入框(input)放置在靠近页面的中下方,点击文本框以后,则输入框会被弹出的手机输入法键盘遮盖住。

找到一段js代码直接解决之,点击时强制滚动之,好像也解决了在Android浏览器下浏览的同样问题。

1 if(/Android [4-6]/.test(navigator.appVersion)) {
2     window.addEventListener("resize", function() {
3         if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
4             window.setTimeout(function() {
5                 document.activeElement.scrollIntoViewIfNeeded();
6             },0);
7         }
8     })
9 }
				
时间: 2024-10-05 08:59:56

微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法的相关文章

Javascript限制网页只能在微信内置浏览器中访问

转载:http://segmentfault.com/a/1190000000754332 最近正在开发一个微信公众账号,其中有一项功能是用户发送文字消息给公众号,然后公众号返回图文消息给用户,用户再点击图文消息即可跳转到一个网页链接,在微信的内置浏览器中打开.那么问题就来了,这个网页首先涉及到了移动web前端开发,我优先选择了用HTML5+bootstrap组合来实现页面的美观效果,前端其他的任务交给javascript解决(这里我是完全使用原生javascript代码,没有用到任何的框架,因

H5输入框在输入信息的时候 页面会变形 并且在页面不变形的时候 键盘会遮挡 输入框的解决办法

$(document).ready(function () { $('body').css({'height':$(window).height()})});//这行是解决输入框在输入信息弹出键盘后页面变形 $(function () {//微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法window.addEventListener("resize", function () {     if (document.activeElement.tagName == "

非微信内置浏览器中的网页调起微信支付的方案研究

问题来源 之前在app中集成过微信支付,当时还写了一篇扫坑贴,此种微信支付方式为app支付,即在我们自己的应用中嵌入微信支付SDK,由Native代码调起微信支付. 后来由于业务需要在我们app的WebView中打开第三方店铺的网页,在第三方网页中有微信支付按钮,测试反馈说ios可以调起微信支付,而android不可以.后来网上看到说微信内置Webview和京东的网页也可以调起微信支付,微信自己没什么奇怪的,而京东可以的话,如果它跟微信没什么合作协议的话,那么其他app应该也可以在网页中调用微信

微信内置浏览器私有接口WeixinJSBridge介绍

原文地址:http://www.3lian.com/edu/2015/05-25/216227.html 这篇文章主要介绍了微信内置浏览器私有接口WeixinJSBridge介绍,本文讲解了发送给好友.分享函数.隐藏工具栏.隐藏三个点按钮等功能,需要的朋友可以参考下 微信网页进入,右上角有三个小点,没错,我们用到的就是它!我们只要通过将小点列表下的按钮进行自定义,就可以随心所欲的分享我们自己的内容了. 注意:(WeixinJSBridge只能在微信内打开的网页有效) 按钮一之------发送给好

《解决微信内置浏览器返回上一页强制刷新问题方法》

微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的位置. BINGO~ 通过HTML5的history API + 缓存可以做到这一点. 执行原理: 1.0.通过history API的 history.pushState或 history.replaceState 保存AJAX状态: 2.0.同时将AJAX获取到的数据缓存起来(可以考虑使用H5的

2017年05月10日记一次微项目投产 | 安卓版微信内置浏览器不能解析gzip压缩过的mp4视频的问题

前言 今天投产了一个小项目,一个很简单的H5,有播放视频功能,使用了videojs插件. 之前也做过数个视频播放,视频的转压都按照既定流程进行,文件放到FTP后,iphone和安卓机测试下来都没有问题. 于是给链接,业务组直接在微信公众号里投放了.那个企业号有不少关注的人,推送发出去1分钟就有近千阅读量. 但是我在点击链接后,发现项目打不开了,而且该企业官网的主站也挂了,在经过pc端和手机4G下测试发现问题依然存在后,赶紧报bug给其他同事. 通过询问FTP管理员得知,那个"大"企业的

js判断微信内置浏览器

做了一个h5页面来下载app,但如果页面是用微信扫一扫打开的,点击下载按钮下载不了app,原因是微信内置浏览器屏蔽了下载链接.所以增加了检测,如果用户是用微信浏览器打开的,则提示用户使用浏览器打开.那么,如何判断用户是否是用微信浏览器打开的当前页面呢? 通过获取微信内置浏览器的相关信息:Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11

解决IOS微信内置浏览器返回后不执行js脚本的问题

在A页面写一个$(function(){}) 后随便点击一个URL跳转到B页面 利用微信内置浏览器 返回键返回到A页面后发现这段JS不执行,后来找到了解决方案 $(function () { var isPageHide = false; window.addEventListener('pageshow', function () { if (isPageHide) { window.location.reload(); } }); window.addEventListener('pageh

微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记

微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记 微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript API(Javascript Interface)的文章,不过随着微信官方的调整,部分API已经不能直接使用,比如类似直接分享到朋友圈 WeixinJSBridge.invoke('shareTimeline',data,callback) 这样的功能,直接调用,会得到