一个页面上有个固定在底部的按钮,页面中有个input框,点击input框获取焦点时,在苹果手机上没事,但在安卓手机上弹出的键盘会将按钮顶起来,这就很不好看了,想了个办法解决一下。之前一直觉得用input获取焦点和失去焦点来改变底部按钮的定位,但是有的手机可以隐藏键盘,但是不会失去焦点,这个方法就不行了。后来想了一下,键盘弹出,改变了窗口的大小,所以就想在onresize中来解决。代码如下:

var flag = false;//先定义一个变量,当改变窗口大小的时候用来做判断

$("input").focus(function(){//获取焦点时,flag为true

flag = true;

});

window.onresize = function(){

if(flag){//如果flag为true,键盘弹起,改变底部按钮的position,同时将flag改为false

$("button").css({"position":"initial"});

flag = false;

}else {

$("button").css({"position":"fixed"});

if(document.activeElement.id == "changeNum"){//如果只是收起键盘,而不失去焦点,仍然将flag设为true,否则键盘弹起时仍会将底部按钮顶起

flag = true;

};

};

};

解决安卓手机input获取焦点时会将底部固定定位按钮顶起的问题的更多相关文章

  1. 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题

    场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分 1. 解决初始化文档高度, ...

  2. css 字体上下居中显示 解决安卓手机line-height的偏差

      1.字体左右居中显示 text-align: center   <div class="font"> 上下居中 </div> .font{ width: ...

  3. 解决fixed在苹果手机抖动问题/头部底部固定布局

    1.头部和底部固定,中间内容滚动,不涉及fixed 1)absolute与height:100% <!DOCTYPE html><html><head> <m ...

  4. input固定定位后,当input框获取到焦点时,会离开手机软键盘的解决方法

    前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了 ...

  5. input type = file 在部分安卓手机上无法调起摄像头和相册

    移动端H5web 用input type = file 在部分安卓手机上无法调起摄像头拍照,有的也无法访问相册而是直接访问了文档,解决办法是: 加上 accept = "image/*&qu ...

  6. IE6解决固定定位代码

    有些朋友在进行网页布局时,会遇到IE6浏览器不支持固定定位的兼容性问题,本博将详细介绍此问题的解决方法,需要了解的朋友可以参考下. ie6 垂直居中固定定位,代码如下: #center {_posit ...

  7. 解决input获取焦点时底部菜单被顶上来问题

    <div class="search-box"> <input class="search-input" type="text&qu ...

  8. 安卓手机H5底部fix定位,呼出键盘底部会上浮解决办法

    <script type="text/javascript">var windowInnerHeight = window.innerHeight; //获取当前浏览器 ...

  9. IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input

    移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题! 1.页面没有点击底部input的初始状态 2.安卓手 ...

随机推荐

  1. TreeSet小练习

    package 练习.test1; import java.util.Iterator; import java.util.TreeSet; /* 需求:将字符串中的数值进行排序. 例如String ...

  2. Java学习笔记——封装、继承和多态

    先说说封装: 用new 一条狗来举个例子: public class Dog { //私有化字段 private String name; private int age; //无参构造 Dog(){ ...

  3. 用ajax写分页查询-----2017-05-17

    要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总 ...

  4. JEESZ-Redis分布式缓存安装和使用

    独立缓存服务器: Linux CentOS Redis 版本: 3.0下面我们针对于Redis安装做下详细的记录:编译和安装所需的包:# yum install gcc tcl创建安装目录:# mkd ...

  5. 阿里的dubbo 到底是用来干嘛的?

    Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案. 简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需要用的,只有在分布式的时 ...

  6. python 冒泡排序,递归

    冒泡排序:li = [33, 55, 58, 66, 58, 555,20000000000000000000000, 5555,5555, 5, 6, 62,1]for i in range(1,l ...

  7. Jenkins 发布后自动创建git tag

    为了便于项目中对发布的版本进行回滚,所以我们每次发布完成以后自动创建git tag. 1,创建一个Jenkins任务,命名成为push_tag_demo: 2,配置<源码管理>,这里配置比 ...

  8. 解决selenium驱动Firefox跳转页慢慢慢的问题

    首先我给自己定义为是一个更新偏执狂.不知道从哪个版本开始,使用selenium驱动打开Firefox浏览器时,会跳转到官网指定页,这个过程真是慢得要死. 为了解决这个问题,我是查了很多资料,解决方案是 ...

  9. 关于Cookie安全性设置的那些事

    一.标题:关于Cookie安全性设置的那些事 副标:httponly属性和secure属性解析 二.引言 经常有看到XSS跨站脚本攻击窃取cookie案例,修复方案是有httponly.今天写出来倒腾 ...

  10. DOM4J介绍与代码示例

    DOM4J是dom4j.org出品的一个开源XML解析包.Dom4j是一个易用的.开源的库,用于XML,XPath和XSLT.它应用于Java平台,采用了Java集合框架并完全支持DOM,SAX和JA ...