首先看一下我要解决的问题,第一张图是正常的情况下,第二张图是点击了输入框之后的情况,就是要解决此问题~!

百度了一下解决方法,好像有以下的一些方法:

1. iscroll

2. Jquery Mobile

3. 监听屏幕滚动事件给 #footer 赋值

由于本人新手,第1,2种的方法就没学过,所以暂时不用这2方法,来看第三种:监听屏幕滚动事件给 #footer 赋值

1. 首先设置 #footer 的 position 的值为 absolute

2. 然后用$(window).scroll() 来监听,再给 #footer 设置坐标( top 属性)

不过这方法我感觉有点不好,就是ios设备在拖动屏幕的时候,页面DOM的操作会被挂起,就是说你手指滚动屏幕的时候页面会定死,当你的手指离开了屏幕后,dom的操作才执行。所以我也不用这种方式了。。

下面说下我用的另类方式,

1.  监听input输入框获取焦点事件 $().focus()

2.  把屏幕滚动到底部 $window  scroll to bottom

3.  把 #footer 的 position 属性设置成 static (或者absolute)

这样 #footer 就会定位到最底部(但不是固定) 为什么我要这么做呢? 因为呢,移动设备弹出虚拟键盘的时候,页面可见的地方已经很少了,一般情况在输入的状态下是不会拖动屏幕的了,所以就采用这种方式。

4.  监听 input 失去焦点事件 $().blur()

5.  然后把 #footer 的 position 属性设置成 fixed。

这样就好了。。。。

总结来说就是触发虚拟键盘的时候把position属性改成static/absolute, 虚拟键盘消失的时候再把 position 属性改回 fixed........

function sb_blur(){
$('#order_summary').css({
"position":"fiexd",
"bottom":""
})
}
function sb_focus(){
$(window).scrollTop();
$('#order_summary').css({
"position":"relative"
})
}

ios设备触发虚拟键盘输入后position:fixed 无效的一些简单另类的解决方法。的更多相关文章

  1. 安卓手机 虚拟键盘输入用 position:fixed解决 !!!

    下面 主要代码 方便看. 样式 <style> *{ margin:0; padding:0; } html{ height:100%;/*关键代码*/ } body{ height:10 ...

  2. ajax请求成功后打开新开窗口(window.open())被拦截的解决方法

    问题:今天在做项目时需要在ajax请求成功后打开一个新的窗口,此时遇到浏览拦截了新窗口的问题,尝试在ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('clic ...

  3. WPF:验证登录后关闭登录窗口,显示主窗口的解决方法

    http://www.27ba.com/post/145.html WPF:验证登录后关闭登录窗口,显示主窗口的解决方法 最近想做一个基于Socket的通讯工具,想模仿QQ那样,需要先登录,登录成功后 ...

  4. ECSHOP后台登陆后一段时间不操作就超时的解决方法

    ECSHOP后台登陆后一段时间不操作就超时的解决方法 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2012-05-27   客户生意比较好,因此比较忙,常常不在电脑前 ...

  5. iOS开发中虚拟键盘相关的坑

    初学者在学习iOS开发时,遇到在一个textField中输入完内容后却发现虚拟键盘无法隐藏起来而不知所措的情况的人一定不占少数吧.这篇文章就说说我遇到的和虚拟键盘有关的三个问题及解决对策. 在模拟器测 ...

  6. IOS微信端软键盘收起后界面按钮失效问题

    问题描述: 1.在vue里封装了一个confirm的弹窗(即如下一个弹窗) 2.发现在IOS微信客户端中打开后,当需要在表单中输入内容的时候,很自然的点击了键盘右上角的[完成]按钮 3.啊~~~,惊人 ...

  7. IOS系统下虚拟键盘遮挡文本框问题的解决

    最近在项目中发现同样的代码在Android端微信网页中点击文本框唤出的虚拟键盘不会遮挡文本框,但是在IOS端的微信网页中点击文本框唤出的键盘却在大部分情况下会遮挡文本框 经过高人指点,这个问题终于解决 ...

  8. 移动端ios针对input虚拟键盘挡住的问题

    写移动端的时候发现input的虚拟键盘对Ios的手机不是很友好 我的是苹果6 点击的时候经常会挡住input框 针对这个问题找了很多发现都没效果 最后发现用下面这段js就可以解决了 $("i ...

  9. IOS 键盘弹出导致的position:fixed 无效问题

    解决办法(还未测试): 只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果,无需插件.可拷 ...

随机推荐

  1. linux_rsync定时备份

    在linux系统中,需要注意空格使用,有着整体性原则,并且注意大小写问题 Rsync数据同步工具 开源.快速.多功能.可实现全量和增量的本地或远程 具有本地和远程两台主机之间数据快速同步镜像.远程备份 ...

  2. Django_实现分页

    需求: 对于有很多数据,并不希望一次性全部展现在一个页面,需要一个分页的,定好每一页显示的内容 那,如何满足这个需求呢? 通过第三方模块  django-pure-pagination pip ins ...

  3. Python初识 - day5

    一.装饰器(decorator) 1.定义:本质是函数(装饰其它函数),就是为了其它函数添加附加功能. 2.原则:一是不能修改被装饰函数的源代码:二是不能修改被装饰函数的调用方式. 3.装饰器包含的知 ...

  4. win7下JAVA环境变量配置方法

    1.首先,根据自己的需要下载1.6或者1.7的JDK,安装JDK.(安装的时候记一下安装目录,后面会用到) 2.右键计算机→属性→高级系统设置→高级→环境变量,在系统变量部分新建名为"JAV ...

  5. 极其蛋疼的if else 中的break用法

    主要原因是if不是循环语句 像这样的: while(...) { ==res) { break; } printf("A"); } 跳出的就是while循环.而不是if判断语句 补 ...

  6. 1、突然对jQuery的心血来潮

    起因 随着饿百新零售项目一期的告一段落,算是暂时从加班的修罗场里面解放出来了,于是就想搞点事情,正好看项目js库的时候发现了躺在角落的jQuery,想到当初看源码的时候断断续续的没有看完一直是心头的遗 ...

  7. Python算法——二叉树

    一.二叉树 from collections import deque class BiTreeNode: def __init__(self, data): self.data = data sel ...

  8. 基于SpringMVC+Mybatis搭建简单的前后台交互系统

    前面博文有一篇 名为基于tomcat+springMVC搭建基本的前后台交互系统(http://www.cnblogs.com/hunterCecil/p/6924935.html),例文中使用了Io ...

  9. 10_set集合

    一.集合类型 集合是一组无序排列的可哈希的值(可哈希的值->不可变),集合成员可以做字典中的键.但集合本身是不可哈希的. 集合是无序没有索引,也没有像字典的key,所以集合不能更改元素.只能增删 ...

  10. JSP基础篇

    JSP可以认为是加上了Java代码块的HTML文件,常常和CSS,JS结合使用,下面是一个JSP的基本的例子. <%@ page language="java" conten ...