ios设备触发虚拟键盘输入后position:fixed 无效的一些简单另类的解决方法。
首先看一下我要解决的问题,第一张图是正常的情况下,第二张图是点击了输入框之后的情况,就是要解决此问题~!

百度了一下解决方法,好像有以下的一些方法:
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 无效的一些简单另类的解决方法。的更多相关文章
- 安卓手机 虚拟键盘输入用 position:fixed解决 !!!
下面 主要代码 方便看. 样式 <style> *{ margin:0; padding:0; } html{ height:100%;/*关键代码*/ } body{ height:10 ...
- ajax请求成功后打开新开窗口(window.open())被拦截的解决方法
问题:今天在做项目时需要在ajax请求成功后打开一个新的窗口,此时遇到浏览拦截了新窗口的问题,尝试在ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('clic ...
- WPF:验证登录后关闭登录窗口,显示主窗口的解决方法
http://www.27ba.com/post/145.html WPF:验证登录后关闭登录窗口,显示主窗口的解决方法 最近想做一个基于Socket的通讯工具,想模仿QQ那样,需要先登录,登录成功后 ...
- ECSHOP后台登陆后一段时间不操作就超时的解决方法
ECSHOP后台登陆后一段时间不操作就超时的解决方法 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2012-05-27 客户生意比较好,因此比较忙,常常不在电脑前 ...
- iOS开发中虚拟键盘相关的坑
初学者在学习iOS开发时,遇到在一个textField中输入完内容后却发现虚拟键盘无法隐藏起来而不知所措的情况的人一定不占少数吧.这篇文章就说说我遇到的和虚拟键盘有关的三个问题及解决对策. 在模拟器测 ...
- IOS微信端软键盘收起后界面按钮失效问题
问题描述: 1.在vue里封装了一个confirm的弹窗(即如下一个弹窗) 2.发现在IOS微信客户端中打开后,当需要在表单中输入内容的时候,很自然的点击了键盘右上角的[完成]按钮 3.啊~~~,惊人 ...
- IOS系统下虚拟键盘遮挡文本框问题的解决
最近在项目中发现同样的代码在Android端微信网页中点击文本框唤出的虚拟键盘不会遮挡文本框,但是在IOS端的微信网页中点击文本框唤出的键盘却在大部分情况下会遮挡文本框 经过高人指点,这个问题终于解决 ...
- 移动端ios针对input虚拟键盘挡住的问题
写移动端的时候发现input的虚拟键盘对Ios的手机不是很友好 我的是苹果6 点击的时候经常会挡住input框 针对这个问题找了很多发现都没效果 最后发现用下面这段js就可以解决了 $("i ...
- IOS 键盘弹出导致的position:fixed 无效问题
解决办法(还未测试): 只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果,无需插件.可拷 ...
随机推荐
- asp.net web api 向客户端返回错误信息
1使用Http状态码 ASP.NET Web Api框架提供了Http状态码的值,如下图所示. 虽然有这些预定义的状态码,但在实际项目中使用自定状态码结合预定义状态码更有优势. 通过在适当的位置抛出异 ...
- java URL和URLConnection
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
- 【Thinkphp 5】 整合邮箱类 phpmailer实现邮件发送
第一步:下载phpmailer文件,主要用到的文件只有箭头指向的两个,thinkphp5中,把class.phpmailer.php改成了phpmailer.php 第二步: 将phpmailer文件 ...
- pwd 的“P”选项
1.目录是链接目录时,pwd -P 显示出实际路径,而非使用连接(link)路径:pwd显示的是连接路径 例: [root@localhost soft]# cd /etc/init.d [root ...
- exp/imp 多用户导入导出
创建用户 创建三个用户test1,test2,test3及表table1,table2,table3 SQL> create user test1 identified by test1 def ...
- PyCharm配置autopep8,自动格式化Python代码
1. 关于PEP 8 PEP 8,Style Guide for Python Code,是Python官方推出编码约定,主要是为了保证 Python 编码的风格一致,提高代码的可读性. 官网地址:h ...
- git的sshkey生成步骤
找到git安装的目录,运行"git-bash.exe". 配置git的user的name及email $ git config --global user.name "u ...
- 23_迭代器、模拟For循环
一.可迭代对象 和 迭代器 1.可迭代对象和迭代器 可迭代对象:可以直接作用于for循环的对象统称为可迭代对象,Iterable. 迭代器:可以被next()函数调用并不断返回下一个值的对象称为迭代器 ...
- Go笔记-垃圾回收集和SetFinalizer
[垃圾回收] 1- Go的开发者也不用写代码来释放程序中不再使用的变量和结构占用内存,Go中有独立的进程,垃圾回收器(GC),处理这些事情.它会搜索不再使用的变量然后释放它们. 2- ...
- 利用回调实现Java的异步调用
异步是指调用发出后,调用者不会立刻得到结果,而是在调用发出后,被调用者通知调用者,或通过回调函数处理这个调用. 回调简单地说就是B中有一个A,这样A在调用B的某个方法时实际上是调用到了自己的方法. 利 ...