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

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

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. Mysql覆盖索引 covering index 或者 index coverage

    组合索引 提到组合索引,大家都知道"最左前缀"原则.例如,创建索引 idx_name_age (name,age) ,通常情况下,where age=50 或者 where age ...

  2. Linux用户登录记录日志和相关查看命令汇总

    # 1 utmp.wtmp.btmp文件 Linux用户登录信息放在三个文件中: 1 /var/run/utmp:记录当前正在登录系统的用户信息,默认由who和w记录当前登录用户的信息,uptime记 ...

  3. php中HTTP_X_FORWARDED_FOR 和 REMOTE_ADDR的使用

    1.REMOTE_ADDR:浏览当前页面的用户计算机的ip地址2.HTTP_X_FORWARDED_FOR: 浏览当前页面的用户计算机的网关3.HTTP_CLIENT_IP:客户端的ip 在PHP 中 ...

  4. Eclipse设置代码自动提示

    Eclipse只需几步简单的设置就可以像idea那样代码自动提示了,喜欢的小伙伴可以赶紧动手设置,提升效率. 第一步:打开Eclipse --> Window --> Preference ...

  5. Centos 7 安装 memcached

    一.准备工作: 安装之前确保你的系统上已经安装libevent和telnet· 1.测试是否安装telnet: # rpm -qa |grep telnet 如果显示结果为: telnet-0.17- ...

  6. jenkins安装配置[二]

    标签(linux): jenkins 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 安装依赖,如果本机已有java环境可跳过 yum install java- ...

  7. Java在已存在的pdf文件中生成文字和图片--基础

    自我总结,有什么不足之处请告知,感激不尽!下一次总结pdf模板映射生成报表(应对多变的pdf报表需求,数据提供和报表生成解耦). 目的:在给定的pdf模板上生成报表,就需要知道最基本的操作:文字添加, ...

  8. 网易云免费OSS服务用做Markdown图床或博客图片外链

    我使用据说是Windows下最好用的Markdown编辑器“MarkdownPad2”(个人感觉还是Visual Code+Markdown插件666)写Markdown,在贴图方面遇到一个问题,于是 ...

  9. cmake编译安装mysql 5.6.12

    cmake安装mysql 5.6.12 从mysql 5.5 开始就要用cmake编译安装 下载mysql 下载地址:http://pan.baidu.com/s/1o68xxqE 一.安装mysql ...

  10. “字符串替换” 和 “模板设置” (application/config.php)

    //视图输出字符串内容替换'view_replace_str' => [ '__PUBLIC__' => '/public/', '__ROOT__' => '/',], 模板设置: ...