解决安卓手机input获取焦点时会将底部固定定位按钮顶起的问题
一个页面上有个固定在底部的按钮,页面中有个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获取焦点时会将底部固定定位按钮顶起的问题的更多相关文章
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分 1. 解决初始化文档高度, ...
- css 字体上下居中显示 解决安卓手机line-height的偏差
1.字体左右居中显示 text-align: center <div class="font"> 上下居中 </div> .font{ width: ...
- 解决fixed在苹果手机抖动问题/头部底部固定布局
1.头部和底部固定,中间内容滚动,不涉及fixed 1)absolute与height:100% <!DOCTYPE html><html><head> <m ...
- input固定定位后,当input框获取到焦点时,会离开手机软键盘的解决方法
前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了 ...
- input type = file 在部分安卓手机上无法调起摄像头和相册
移动端H5web 用input type = file 在部分安卓手机上无法调起摄像头拍照,有的也无法访问相册而是直接访问了文档,解决办法是: 加上 accept = "image/*&qu ...
- IE6解决固定定位代码
有些朋友在进行网页布局时,会遇到IE6浏览器不支持固定定位的兼容性问题,本博将详细介绍此问题的解决方法,需要了解的朋友可以参考下. ie6 垂直居中固定定位,代码如下: #center {_posit ...
- 解决input获取焦点时底部菜单被顶上来问题
<div class="search-box"> <input class="search-input" type="text&qu ...
- 安卓手机H5底部fix定位,呼出键盘底部会上浮解决办法
<script type="text/javascript">var windowInnerHeight = window.innerHeight; //获取当前浏览器 ...
- IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input
移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题! 1.页面没有点击底部input的初始状态 2.安卓手 ...
随机推荐
- Java Socket应用---通信是这样练成的
网络基础简介 Java 中网络相关 API 的应用 Java 中的 InetAddress 的应用 Test01.java package com.imooc; import java.n ...
- Java学习笔记——设计模式之五.工厂方法
水边一只青蛙在笑 --石头和水 工厂方法模式(Factory Method),定义了一个用于创建对象的接口,让实现类决定实例化哪一个类.工厂方法使一个类的实例化延迟到其子类. 这里在简单和工厂的基础上 ...
- 龟兔赛跑,杭电oj-2059
原题地址:http://acm.hdu.edu.cn/showproblem.php?pid=2059 [Problem Description] 据说在很久很久以前,可怜的兔子经历了人生中最大的打击 ...
- Python 基本数据类型_常用功能整理
一.字符串 字符串 s ="axle" #去两端空格 s.split() #以什么开头 s.startswith("a") #查找子序列,"12&qu ...
- UILabel图文混排显示图片和文字
//传入文字 自动图片放在左边文字紧接着后排排布 -(void)setAttrDetailLabelWithTitle:(NSString *)title { NSMutableAttributedS ...
- 从插上网线到web页面请求,究竟发生了哪些过程?(计算机网络篇)
一.说在前头 好久没有更新博客了,汗颜,最近忙于各种实验与报告,但是还是要抽时间总结一下学的东西.欢迎转载,但是要注明出处哦(=^ ^=). 最近学了计算机网络,正好总结一下.本篇博客的大部分是跟计算 ...
- Js判断是否是直接进入本页面的
今天带来一个Js的小示例,用来判断当前页面的链接来路.很多人应该可以用到,这个虽然非常简单,但是用到的地方却还是挺多的 首先新建一个index.html,代码如下 <!DOCTYPE html& ...
- CCNA毕业测试
要求: 1:不同楼层物理隔离,但逻辑相连 2:相同楼层物理相连,但逻辑隔离 3:主机可以动态获取IP地址 4:不同VLAN间可以进行通信 5:主机最终访问www.baidu.com弹出Congratu ...
- void main(), int main() 和int main(void)的区别
1.区别是main()函数是否有返回值.2.void定义的函数没有返回值,int定义的函数返回整型值.3.void,字面意思是"无类型",常用在程序编写中对定义函数的参数类型.返回 ...
- 新写的高仿Arcmap,要的拿去玩玩
本想着对所学的ArcGIS Engine开发作一个了结,于是乎写了这么一个仿照Arcmap的程序.我所见过的地理信息系统中,ArcGIS是功能最完善.二次开发最易上手的平台了(当然别提AutoCAD那 ...