js 移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局。这时候Android可以监听resize事件,代码如下,而ios没有相关事件。

var winHeight = $(window).height();   //获取当前页面高度
$(window).resize(function(){
var thisHeight=$(this).height();
if(winHeight - thisHeight >50){
//当软键盘弹出,在这里面操作 }else{
//当软键盘收起,在此处操作
}
});
/**
* 解决ios键盘弹出遮挡input
*/
function iosInput() {
if(isIos()){
$('.chart-footer').css('position','absolute');//解决第三方软键盘唤起时底部input输入框被遮挡问题
var bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度
$(".chart-input").focus(function(){//在这里‘input.inputframe’是我的底部输入栏的输入框,当它获取焦点时触发事件
interval = setInterval(function(){//设置一个计时器,时间设置与软键盘弹出所需时间相近
document.body.scrollTop = document.body.scrollHeight;//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度
},100)
}).blur(function(){//设定输入框失去焦点时的事件
clearInterval(interval);//清除计时器
document.body.scrollTop = bfscrolltop;//将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度
});
}
}
iosInput();

js 移动端之监听软键盘弹出收起的更多相关文章

  1. JS移动端如何监听软键盘回车事件

    移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签  注意点:form ...

  2. h5 移动端 监听软键盘弹起、收起

    前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化window.onresize事件来做突破点的,但是io ...

  3. ionic3 监听软键盘的高度

    ionic1 和普通cordova的大家都知道 就是看ionic3 和4 https://blog.csdn.net/sean_css/article/details/70243893 ionic c ...

  4. adnroid 监听软键盘的显隐

    首先注明出处,我只是想做个笔记:http://www.jb51.net/article/64820.htm 第一眼看到的时候,觉得不太可靠,因为之前都是看到这样处理的,根据监听一个根布局的size,可 ...

  5. Android 另类方法监听软键盘的弹出收起事件

    http://www.cnblogs.com/csonezp/p/5065624.html 最近做的项目碰到个问题,a界面是fragment+recyclerview,b界面带个edittext,并且 ...

  6. Android App监听软键盘按键的三种方式

    前言:   我们在android手机上面有时候会遇到监听手机软键盘按键的时候,例如:我们在浏览器输入url完毕后可以点击软键盘右下角的“GO”按键加载url页面:在点击搜索框的时候,点击右下角的sea ...

  7. 键盘-App监听软键盘按键的三种方式

    前言:   我们在android手机上面有时候会遇到监听手机软键盘按键的时候,例如:我们在浏览器输入url完毕后可以点击软键盘右下角的“GO”按键加载url页面:在点击搜索框的时候,点击右下角的sea ...

  8. android软键盘弹出隐藏的监听

    通过网上搜索关于软键盘的隐藏弹出的监听,有几种方式,其中最有效的方式是在View的Onlayout()里面做文章 具体代码: 将布局视图自定义,重写onlayout()方法,然后在主Activity里 ...

  9. Android App监听软键盘按键的三种方式(转)

    最近有类似需求,在csdn上刚好发现,粘贴过来,以防止忘记喽 前言:   我们在android手机上面有时候会遇到监听手机软键盘按键的时候,例如:我们在浏览器输入url完毕后可以点击软键盘右下角的“G ...

随机推荐

  1. t420 win7 硬盘安装ubuntu 10.04 LTS 备忘

    http://zhangwen.sinaapp.com/?p=5 t420 win7 硬盘安装ubuntu 10.04 LTS 备忘 发表于 2011 年 10 月 25 日 对ubuntu的新版没有 ...

  2. 联合主键SQL 联合索引

    联合主键索引 联合索引 ALTER TABLE [dbo].[Tb_Shop] ADD CONSTRAINT [shopno] UNIQUE NONCLUSTERED ( [ShopGid] ASC, ...

  3. openstack虚拟机获取不到ip

    一.现象描述: openstack平台中创建虚拟机后,虚拟机在web页面中显示获取到了ip,但是打开虚拟机控制台后查看网络状态,虚拟机没有ip地址,下图为故障截图: 二.分析思路: (1)查看neut ...

  4. idea tomcat部署项目路径

    在idea中配置的tomcat,在运行时idea不会把项目放到该路径下,而是复制一份足够的配置文件,到 ${user.home}/.IntelliJIdea/system/tomcat 目录下: C: ...

  5. c#中Split 分离字符以及空格消除方法

    1        split几种分离方法 1)用字符串分隔: using System.Text.RegularExpressions; string str="aaajsbbbjsccc& ...

  6. [LeetCode] 280. Wiggle Sort 摆动排序

    Given an unsorted array nums, reorder it in-place such that nums[0] <= nums[1] >= nums[2] < ...

  7. DevOps - DevOps精要 - 变革

    特别说明 本文是已读书籍的学习笔记和内容摘要,原文内容有少部分改动,并添加一些相关信息,但总体不影响原文表达. <DevOps入门与实践> :本书结合实例详细介绍了在开发现场引入DevOp ...

  8. 【C/C++开发】TinyXml操作(含源码下载)

    前言 TinyXML是一个开源的解析XML的解析库,能够用于C++,能够在Windows或Linux中编译,使用TinyXML进行C++ XML解析,使用简单,容易上手. 这个解析库的模型通过解析XM ...

  9. android基础---->Toast的使用

    简要说明 Toast是一种没有交点,显示时间有限,不能与用户进行交互,用于显示提示信息的显示机制,我们可以把它叫做提示框.Toast不依赖 于Activity,也就是说,没有Activity,依然可以 ...

  10. 最新 途牛java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.途牛等10家互联网公司的校招Offer,因为某些自身原因最终选择了途牛.6.7月主要是做系统复习.项目复盘.LeetCode ...