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. Vue 自定义编译打包路径

    在 vue.config.js 文件下添加 outputDir 配置项: module.exports = { outputDir:"my_target_direct", // o ...

  2. gulp&sass安装配置

    首先需要nodejs和npm 然后安装Gulp及其Sass预处理器 在主题目录的根目录中,创建一个空的package.json并复制粘贴以下代码: { "author": &quo ...

  3. ES6将两个数组合并成一个对象数组

    需求 有这么两个数组 let metrodates = [ "2008-01", "2008-02", "2008-03",..ect ]; ...

  4. Python numpy 中常用的数据运算

    Numpy 精通面向数组编程和思维方式是成为Python科学计算大牛的一大关键步骤.——<利用Python进行数据分析> Numpy(Numerical Python)是Python科学计 ...

  5. [简短问答]LODOP打印不清晰

    用什么语句输出的:使用的的是什么语句输出的,是ADD_PRINT_TEXT纯文本,还是html的超文本. 超文本不清晰:如果用的是ADD_PRINT_HTML ,换成 ADD_PRINT_HTM试试, ...

  6. [LeetCode] 309. Best Time to Buy and Sell Stock with Cooldown 买卖股票的最佳时间有冷却期

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  7. 存储Flash--NOR flash和 Nand flash

    flash是存储芯片的一种,通过特定的程序可以修改里面的数据.FLASH在电子以及半导体领域内往往表示Flash Memory的意思,即平时所说的“闪存”,全名叫Flash EEPROM Memory ...

  8. 给通过canvas生成的二维码添加logo

    以jquery.qrcode为例来说, 生成二维码代码: 依赖jquery.js, jquery.qrcode.js //计算宽,高,中心坐标,logo大小 var width = 256,heigh ...

  9. php_mvc实现步骤九(登录验证码,退出-登录标记)

    shop34-17-登录验证码 验证码的分析 登录:防止暴力破解 论坛:防止灌水水 展示类:被抓取. 需要技术: 图片处理技术. 会话session技术. PHP图片处理技术 – GD 具体操作步骤 ...

  10. java并发-ReentrantLock的lock和lockInterruptibly的区别

    ReentrantLock的加锁方法Lock()提供了无条件地轮询获取锁的方式,lockInterruptibly()提供了可中断的锁获取方式.这两个方法的区别在哪里呢?通过分析源码可以知道lock方 ...