解决安卓手机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.安卓手 ...
随机推荐
- 计算进程消费cpu和内存
Linux下没有直接可以调用系统函数知道CPU占用和内存占用.那么如何知道CPU和内存信息呢.只有通过proc伪文件系统来实现. proc伪文件就不介绍了,只说其中4个文件.一个是/proc/stat ...
- 使用bootstrap的插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- 使用java API操作hdfs--通过filesystem API 来读取数据
上面的Path的包是导入错误了,nio中的包是抽象类,是无法创建的,所以换地方更改. 修改之后,指定jar包之后,编译成功,如下,并进行文件的读取操作,依然是成功啦:
- Java学习笔记--链表
心在山东身在吴,飘蓬江海漫嗟吁. 他时若遂凌云志, 敢笑黄巢不丈夫. --水浒传 先上源代码,LinkedList类: private static class Node<E> { E i ...
- 为Android内核添加新驱动
转载地址:http://blog.chinaunix.net/uid-16759545-id-4892379.html 1. 在drives目录下添加hello目录,内含hello.c Kconfig ...
- C#中设置TextBox控件中仅可以输入数字且设置上限
首先设置只可以输入数字: 首先设置TextBox控件的KeyPress事件:当用户按下的键盘的键不在数字位的话,就禁止输入 private void textBox1_KeyPress(object ...
- Swift 入门之简单语法(五)
面向对象 目标 构造函数 构造函数的基本概念 构造函数的执行顺序 KVC 在构造函数中的使用及原理 便利构造函数 析构函数 区分 重载 和 重写 懒加载 只读属性(计算型属性) 设置模型数据(didS ...
- 对RabbitMQ.Client进行一下小小的包装,绝对实用方便
RabbitMQ是一个老牌的非微软的消息队列组件,一般来说应该能满足中小型公司对消息队列生产的需求,平时我们在.NET开发环境下运用它是可能会需要RabbitMQ.Client的SDK库,此库是官网提 ...
- Lambda应用场景和使用实例
Java 8已经推出一段时间了,Lambda是其中最火的主题,不仅仅是因为语法的改变,更重要的是带来了函数式编程的思想.这篇文章主要聊聊Lambda的应用场景及其相关使用示例. Java为何需要Lam ...
- 教你怎么把iconfont转换成png透明图片
1.进入iconfont图标库,登陆.http://www.iconfont.cn/ 2.选择想要的图标加入购物车. 3.直接选中下载图标为png格式.