解决安卓手机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爬虫(一)利用GET和POST发送请求,获取服务器返回信息
本人所使用软件 eclipse fiddle UC浏览器 分析请求信息 以知乎(https://www.zhihu.com)为例,模拟登陆请求,获取登陆后首页,首先就是分析请求信息. 用UC浏览器F1 ...
- 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...
- OAuth 2.0: Bearer Token Usage
Bearer Token (RFC 6750) 用于HTTP请求授权访问OAuth 2.0资源,任何Bearer持有者都可以无差别地用它来访问相关的资源,而无需证明持有加密key.一个Bearer代表 ...
- iOS 发布证书提示 此证书的签发者无效 解决办法
1. 打开钥匙串 查看发布证书 都是提示 此证书的签发者无效 解决办法 : 2. 到了 第 4 步骤 再去 查看 发布证书 就会 显示 此证书有效 3. 如果还不可以 就 把 Apple W ...
- jQuery遍历节点方法汇总
1.children()方法:$('div').children()---遍历查找div元素的所有子元素节点 <p>Hello</p> <div> <span ...
- OpenStack Newton版本Ceph集成部署记录
2017年2月,OpenStack Ocata版本正式release,就此记录上一版本 Newton 结合Ceph Jewel版的部署实践.宿主机操作系统为CentOS 7.2 . 初级版: 192. ...
- xml注释快捷键
eclipse中编辑Java或C/C++文件时,注释的快捷键均为 "CTRL + / ",编辑xml文件时,该快捷键无效. eclipse XML 注释:CTRL + SHIFT ...
- OpenCV探索之路(十):图像修复技术
在实际应用中,我们的图像常常会被噪声腐蚀,这些噪声或是镜头上的灰尘或水滴,或是旧照片的划痕,或者是图像遭到人为的涂画(比如马赛克)或者图像的部分本身已经损坏.如果我们想让这些受到破坏的额图片尽可能恢复 ...
- Swift和Javascript的神奇魔法
Swift和Javascript的神奇魔法 记录Swift和Javascript如何进行交互 前言 今天在网上看到了一篇介绍Swift和Javascript交互的文章,感觉作者写的很好,因此把作者文章 ...
- 分辨率、像素和PPI
屏幕尺寸是指屏幕对角线的长度,一般以英寸为单位,1英寸(inch)=2.54厘米(cm).传统意义上的照片尺寸也是这个概念.所以同样尺寸(指对角线)的屏幕,也可能长宽比率不同.像素(Pixel):是位 ...