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;就可以实现效果,无需插件.可拷 ...
随机推荐
- javascript属性之get/set
var o = { get x(){ return 7; }, set x(val){ console.info("不能设置x的值"); } } o.x //7 读取x值的时候,会 ...
- MySQL两大存储引擎InnoDB与MyISAM
1.InnoDB存储引擎 MySQL5.5中InnoDB成为默认的存储引擎.InnoDB是事务型存储引擎,被设计用来处理大量的短期事务.它的性能和自动崩溃恢复特性,使得它在非事务场景中也很流行. 所以 ...
- Linux指令--chgrp
在lunix系统里,文件或目录的权限的掌控以拥有者及所诉群组来管理.可以使用chgrp指令取变更文件与目录所属群组,这种方式采用群组名称或群组识别码都可以.Chgrp命令就是change group的 ...
- 跨进程的mutex
1.操作系统分为ring0(内核层)和ring3(应用层)两层. ring0层出错会蓝屏,ring3层出错程序就会挂了. event和mutex创建他的指针是应用层,但是它的内部是ring0层,rin ...
- Linux 系统监控常用命令
简介 列举操作系统级监控常用的几个方法,建议收藏使用 CPU top 命令可用于监控系统整体负载,包括cpu.内存使用等,能够实时显示系统中各个进程的资源占用状况 输出样例 top - 19:37:4 ...
- ------- 软件调试——挫败 QQ.exe 的内核模式保护机制 -------
------------------------------------------------------------------------ QQ 是一款热门的即时通信(IM)类工具,在安装时刻会 ...
- 正则匹配url中的query参数信息
var url = 'name=xiaoming&age=10&school=xinhua'; var reg = /([^&=]+)=?([^&]*)/g;
- Go笔记-标准库的介绍
[unsafe]包含了一些打破Go语言“类型安全”的命令,一般的程序中不会被使用,可用在C/C++程序的调用中 [syscall]底层的外部包,提供了操作系统底层调用的基本接口 [os/exec]提供 ...
- thinkpadE470 win10安装虚拟机时出现‘intel VT-x’处于禁用状态 无法执行64位操作系统
上图为安装虚拟机时弹出的问题. 解决办法: 本人电脑型号为thinkpadE470.遇到此问题查阅了很多,都是针对一般电脑的.折腾了好一会儿.故特写一篇针对此型号的. 1.重启计算机,一开始出现联想标 ...
- java web 获取客户端操作系统信息
package com.java.basic.pattern; import java.util.regex.Matcher; import java.util.regex.Pattern; /** ...