移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分
1、 解决初始化文档高度,让文档高度等于窗体高度,并fixed需要定位的区域在最下方
- (function bottonm(){
- if($(document).height()<$(window).height()){
- $('.bottom_fix').css({'position':'fixed','bottom':'0px'});
- $(document).height($(window).height()+'px');
- }
- })();
2、解决输入框input获取焦点得时,虚拟键盘会把fixed元素顶上去(次现在在部分安卓上能发现)如下图
- $('#phone').bind('focus',function(){
- $('.bottom_fix').css('position','static');
- //或者$('#viewport').height($(window).height()+'px');
- }).bind('blur',function(){
- $('.bottom_fix').css({'position':'fixed','bottom':'0'});
- //或者$('#viewport').height('auto');
- });
参考:http://www.cnblogs.com/yexiaochai/p/3561939.html
3、解决屏幕旋转也会出现以上问题
- $(document).bind('orientationchange',function(){
- if(window.orientation==90 || window.orientation==-90){
- $('.bottom_fix').css('position','static');
- }else{
- $('.bottom_fix').css({'position':'fixed','bottom':'0'});
- }
- });
移动端解决fixed和input获取焦点软键盘弹出影响定位的问题的更多相关文章
- input获取焦点软键盘弹出影响定位
解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() { var ...
- 周记3——解决fixed属性在ios软键盘弹出后失效的bug
这周在做空间(“类似”qq空间)项目.首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部.此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了.后来发现,ios绝大 ...
- js 移动端之监听软键盘弹出收起
js 移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局.这时候Android可以监听resize事件,代码如下,而ios没有相关事件. ...
- 解决react-native软键盘弹出挡住输入框的问题
解决react-native软键盘弹出挡住输入框的问题 写登录页面,整体界面居中之后就出现软键盘弹出挡住输入框,用户体验不好的情况.用了RN官方的KeyboardAvoidingView组件,会有多出 ...
- 小程序中点击input控件键盘弹出时placeholder文字上移
最近做的一个小程序项目中,出现了点击input控件键盘弹出时placeholder文字上移,刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题,因此采纳了网上搜到的" ...
- Android软键盘弹出时布局问题
最近项目需要做一个类似聊天室的模块,基于Socket实现的,这部分稍后一段时间再做总结,功能上的相关点都实现了小例子也做出来了,最后发现一个比较腻歪的问题就是软键盘弹出时总是会把标题“挤出”屏幕,(无 ...
- Android软键盘弹出,覆盖h5页面输入框问题
之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位 ...
- android控制软键盘弹出方式
android一把自带的软键盘弹出方式是会将布局顶上去,造成UI乱套的情况. 解决办法:方法一:在你的activity中的oncreate中setContentView之前写上这个代码getWindo ...
- Android 软键盘弹出,界面整体上移
在做搜索功能的时候,点击搜索框,搜索框获取焦点,键盘弹出:现在问题出来了,android软键盘弹出的时候,android整个界面上移,布局被挤压,很难看:要解决这个问题,我们需要用到 windowSo ...
随机推荐
- SGU 190.Dominoes(二分图匹配)
时间限制:0.25s 空间限制:4M 题意: 给定一个N*N的棋盘,一些格子被移除,在棋盘上放置一些1*2的骨牌,判定能否放满,并且输出任意方案. Solution: 首先考虑对棋盘的一个格子黑白染色 ...
- php学习代码杂记
16/2/22 字符串连接 (1)连接运算符(“.”):它返回将右参数附加到左参数后面所得的字符串. (2)连接赋值运算符(“.=”):它将右边参数附加到左边的参数后. 相当于JS里面的 += . $ ...
- yum版本新增包的一般步骤
在Jekins的自动构建环境中,有时会有在构建出的ISO中添加新应用app需求,对于采用rpm包源代码管理方式的构建环境来说,基本步骤如下: 1.下载app的src.rpm包 2.解压src.rpm包 ...
- vim技巧:折叠快捷键
vim技巧:折叠快捷键 以前用的挺熟的,一段时间不用了,快捷键又忘了,不得不重新再看手册,今天专门整理一下,以后查找起来也比较方便. zc 折叠,只折叠最外层的折叠zC 对所在范围内所有嵌套的折叠点进 ...
- Expression Trees
Expression Trees 只是想简单说下表达式树 - Expression Trees 目录 简介 Lambda 表达式创建表达式树 API 创建表达式树 解析表达式树 表达式树的永久性 编译 ...
- iOS的app 中的 埋点
埋点 就是 挖个坑把 种子埋到土里 然后浇水 等待发芽 埋点就是 ,鬼子要进村,我们埋下地雷 埋点就是 小说中 作者欲扬先抑 或者欲擒故纵 设下的伏笔... 好了,用文学的手法很好的 解释了一 ...
- .Echo 命令中经常提到回显,是什么意思?
C:\>echo on C:\>date /t2006-08-06 星期日 C:\>以上内容是在打开回显的情况下执行的,其实我们想看到的只有2006-08-06 星期日这一行内容,但 ...
- 转:windows下使用gvim搭建简单的IDE编译环境(支持C/C++/Python等)
原文来自于:http://www.cnblogs.com/zhuyp1015/archive/2012/06/16/2552269.html 使用gvim在windows环境下搭建简单的IDE环境可以 ...
- [HDOJ 1171] Big Event in HDU 【完全背包】
题目链接:HDOJ - 1171 题目大意 有 n 种物品,每种物品有一个大小和数量.要求将所有的物品分成两部分,使两部分的总大小尽量接近. 题目分析 令 Sum 为所有物品的大小总和.那么就是用给定 ...
- 如何查看SQL Server的数据库实例名
其实一般默认就是MSSQLSERVER (注意,就是英文大写). 点击开始,运行,services.mcs 然后查阅所有SQL Server的项,其中括号中字符串的就是实例名 reference: ...