今天开发的过程中,遇到了一个小问题,是这样的,  UI的设计稿中有个底部的按钮是相对于屏幕定位的,但是这个页面还有一个输入框;具体情况请看下图:

  这就造成了当我们输入框获取焦点的时候,键盘弹起,下面的“确认出售”按钮会跑到键盘的上面去,见截图:

所以这个就有错误了。去网上找了解决方案,但是他是在监测输入框是否有焦点,但是手机在收起键盘的时候,输入框仍是有焦点的。这个时候这个方法就不能成功了。但是他的思想是正确的,就是在键盘弹起的时候,隐藏下面的按钮,等到键盘收起的时候在显示,这样的话就不会出现上图的情况了。

  所以就需要改变监测的方式,最直接最简单的方式就是检测屏幕内容区域的大小改变。当进入这个页面的时候先确定一个大小的值,我们命名为“h”,当内容区域改变的时候监测这个最新区域的大小,如果小于了,我们就认为现在是小键盘弹起了,就让下面的按钮隐藏,当键盘下去的时候,最新的区域大小是等于原来的大小的,就让底部的按钮显示;这样就能比较完美的解决这个问题。废话不多说,下面直接上代码:

 

 var h = document.body.scrollHeight;
window.onresize = function(){
if (document.body.scrollHeight < h) {
document.getElementsByClassName("sure_sell")[0].style.display = "none";//我的下面的按钮的class名为sure_sell
}else{
document.getElementsByClassName("sure_sell")[0].style.display = "block";
}
};

注意,这段代码是针对安卓微信公众号的web页面的。对于ios不会触发onresize的这个函数的,当然,ios也不存在上述的问题,貌似是因为ios键盘弹起的时候,是整个页面往上滑,整个页面的布局不会变。

微信公众号页面的web页面键盘弹起问题的更多相关文章

  1. h5开发微信公众号重定向到关注页面没有关注按钮 (微信你个坑)

    搜索微信公众号是这样的 微信公众号重定向到关注页面没有关注按钮 如何微信公众号重定向到关注页面没有关注按钮,请看上篇笔记 无解,微信一直在封这种通过链接跳转到公众号关注页面的方法.只有放个二维码提示长 ...

  2. 基于APPIUM测试微信公众号的UI自动化测试框架(结合Allure2测试报告框架)

    框架初衷 前两周组内的小伙伴跟我说她现在测试的微信公众号项目(保险)每次上新产品时测试起来很费时,存在大量的重复操作(点点点),手工测试每个产品可能需要半天到一天的时间,复杂的产品需要两天. 由于保险 ...

  3. 基于搜狗搜索的微信公众号爬虫实现(C#版本)

    Author: Hoyho Luo Email: luohaihao@gmail.com Source Url:http://here2say.me/11/ 转载请保留此出处 本文介绍基于搜狗的微信公 ...

  4. C#微信公众号开发 -- (一)开发之前的准备

    本系列文章讲述的是利用C#语言开发微信公众号的实例教程,主要是服务号的开发(因为订阅号不能获取微信开发的高级接口) 想要开发微信服务公众号,首先必须要有一个认证的微信服务号,这样才能够使用微信提供的所 ...

  5. appium操作微信公众号H5 web页面

    安卓微信公众号的H5页面是webview,一般操作需要切换context. 在执行如下步骤,就能直接像识别native样识别webview 1.代码追加: ChromeOptions options ...

  6. 第三百三十节,web爬虫讲解2—urllib库爬虫—实战爬取搜狗微信公众号—抓包软件安装Fiddler4讲解

    第三百三十节,web爬虫讲解2—urllib库爬虫—实战爬取搜狗微信公众号—抓包软件安装Fiddler4讲解 封装模块 #!/usr/bin/env python # -*- coding: utf- ...

  7. 利用OpenShift托管Node.js Web服务进行微信公众号开发

    最近写了一个微信的翻译机器人.用户只要关注该公众号,发送英文的消息,就能收到中文翻译的回复.有兴趣的读者可以扫描下面的二维码关注该公众号,尝试发送英文单词试试看.(有时候第一次发送单词会收到“该公众号 ...

  8. 带领技术小白入门——基于java的微信公众号开发(包括服务器配置、java web项目搭建、tomcat手动发布web项目、微信开发所需的url和token验证)

    微信公众号对于每个人来说都不陌生,但是许多人都不清楚是怎么开发的.身为技术小白的我,在闲暇之余研究了一下基于java的微信公众号开发.下面就是我的实现步骤,写的略显粗糙,希望大家多多提议! 一.申请服 ...

  9. 九 web爬虫讲解2—urllib库爬虫—实战爬取搜狗微信公众号—抓包软件安装Fiddler4讲解

    封装模块 #!/usr/bin/env python # -*- coding: utf-8 -*- import urllib from urllib import request import j ...

随机推荐

  1. 淘宝天猫网站停止支持IE6、IE7浏览器,你还在用xp吗?

    2016年4月14日,是科比正式告别篮球的最后一场球赛.大家都在忙着各种纪念和怀念着看科比打球的青葱岁月.不过已经完美谢幕.而我们今天要说的是微软的IE6.IE7浏览器.淘宝网和天猫商城正式停止支持I ...

  2. post 405 method not allowed

    HTTP 405 错误 – 方法不被允许 (Method not allowed) 介绍 HTTP 协议定义一些方法,以指明为获取客户端(如您的浏览器或我们的 CheckUpDown 机器人)所指定的 ...

  3. Struts2学习笔记⑦

    今天我宛若一个智障- Struts2学的差不多了,今天开始做数据库CURD操作的案例,发现模型驱动一直报NullPointerException异常-.我的妈,我查了半天觉得没啥问题,把关注点放在了g ...

  4. 【转】Syncthing的安装与使用

    Syncthing的安装与使用 无论办公.文件共享.团队协作还是家庭照片.视频.音乐.高清电影的存储,我们常常都有文件同步和存储的需求.但随着国内各大网盘的花式阵亡或限速,早已没什么好选择了. 除了转 ...

  5. 记一次Oracle分区表错误:ORA-14400: 插入的分区关键字未映射到任何分区

    https://blog.csdn.net/xdyzgjy/article/details/42238735

  6. Coursera台大机器学习技法课程笔记08-Adaptive Boosting

    将分类器组合的过程中,将重点逐渐聚焦于那些被错分的样本点,这种做法背后的数学原因,就是这讲的内容. 在用bootstraping生成g的过程中,由于抽样对不同的g就生成了不同的u,接下来就是不断的调整 ...

  7. 机器翻译评价指标之BLEU详细计算过程

    原文连接 https://blog.csdn.net/guolindonggld/article/details/56966200 1. 简介 BLEU(Bilingual Evaluation Un ...

  8. Bootstrap-CL:略缩图

    ylbtech-Bootstrap-CL:略缩图 1.返回顶部 1. Bootstrap 缩略图 本章将讲解 Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstr ...

  9. Centos 7配置docker-阿里云镜像加速

    阿里云加速网址:https://cr.console.aliyun.com/cn-hangzhou/mirrors(自行注册账密码) sudo mkdir -p /etc/docker sudo vi ...

  10. array_intersect

    <?php date_default_timezone_set('Asia/Shanghai'); $a1=array("a"=>"red",&qu ...