移动端解决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 ...
随机推荐
- 【转】UILabel、UITextView自适应得到高度
原文:http://blog.csdn.net/xcysuccess3/article/details/8331549 在iOS中,经常遇到需要根据字符串的内容动态指定UILabel,UITextVi ...
- 对 Xcode 菜单选项的详细探索(转)
转自 http://www.cnblogs.com/dsxniubility/p/4983614.html 本文调研Xcode的版本是 7.1,基本是探索了菜单的每一个按钮.虽然从xcode4一直用到 ...
- JS特殊符号
反斜杠用来在文本字符串中插入省略号.换行符.引号和其他特殊字符. 代码 输出 \' 单引号 \" 双引号 \& 和号 \\ 反斜杠 \n 换行符 \r 回车符 \t 制表符 \b 退 ...
- 关键字throw(something)限制
C++函数后加关键字throw(something)限制,是对这个函数的异常安全性作出限制.void f() throw() 表示f不允许抛出任何异常,即f是异常安全的.void f() throw( ...
- yield用法的一点理解
yield 关键字与 return 关键字结合使用,向枚举器对象提供值.这是一个返回值,例如,在 foreach 语句的每一次循环中返回的值.yield 关键字也可与 break 结合使用,表示迭代结 ...
- 微信公众平台开发(免费云BAE+高效优雅的Python+网站开放的API)
虽然校园App是个我认为的绝对的好主意,但最近有个也不错的营销+开发的模式出现:微信平台+固定域名服务器. 微信公众平台的运行模式不外两个: 一.机器人模式或称转发模式,将说话内容转发到服务器上完成, ...
- 当INPUT 连续输入是连续触发
在 Web 开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理 ...
- 解决nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed错误
重新启动服务器,访问web服务发现无法浏览,登陆服务器之 后进到nginx使用./nginx -s reload重新读取配置文件,发现报nginx: [error] open() "/usr ...
- [R]django的HTTPREQUEST对象
django的HTTPREQUEST对象 via Django使用request和response对象 当请求一张页面时,Django把请求的metadata数据包装成一个HttpRequest对象, ...
- DM9000C网卡驱动程序移植
1.取消版本号不符终止程序运行 2.iobase基地址修改为s3c3440的0x20000000 3.网卡使用的中断号改为IRQ_EINT7 4.中断触发方式改为上升沿触发 5.设置S3C2440的m ...