js 移动端之监听软键盘弹出收起
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 移动端之监听软键盘弹出收起的更多相关文章
- JS移动端如何监听软键盘回车事件
移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签 注意点:form ...
- h5 移动端 监听软键盘弹起、收起
前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化window.onresize事件来做突破点的,但是io ...
- ionic3 监听软键盘的高度
ionic1 和普通cordova的大家都知道 就是看ionic3 和4 https://blog.csdn.net/sean_css/article/details/70243893 ionic c ...
- adnroid 监听软键盘的显隐
首先注明出处,我只是想做个笔记:http://www.jb51.net/article/64820.htm 第一眼看到的时候,觉得不太可靠,因为之前都是看到这样处理的,根据监听一个根布局的size,可 ...
- Android 另类方法监听软键盘的弹出收起事件
http://www.cnblogs.com/csonezp/p/5065624.html 最近做的项目碰到个问题,a界面是fragment+recyclerview,b界面带个edittext,并且 ...
- Android App监听软键盘按键的三种方式
前言: 我们在android手机上面有时候会遇到监听手机软键盘按键的时候,例如:我们在浏览器输入url完毕后可以点击软键盘右下角的“GO”按键加载url页面:在点击搜索框的时候,点击右下角的sea ...
- 键盘-App监听软键盘按键的三种方式
前言: 我们在android手机上面有时候会遇到监听手机软键盘按键的时候,例如:我们在浏览器输入url完毕后可以点击软键盘右下角的“GO”按键加载url页面:在点击搜索框的时候,点击右下角的sea ...
- android软键盘弹出隐藏的监听
通过网上搜索关于软键盘的隐藏弹出的监听,有几种方式,其中最有效的方式是在View的Onlayout()里面做文章 具体代码: 将布局视图自定义,重写onlayout()方法,然后在主Activity里 ...
- Android App监听软键盘按键的三种方式(转)
最近有类似需求,在csdn上刚好发现,粘贴过来,以防止忘记喽 前言: 我们在android手机上面有时候会遇到监听手机软键盘按键的时候,例如:我们在浏览器输入url完毕后可以点击软键盘右下角的“G ...
随机推荐
- 2019_软工实践_Beta(1/5)
队名:955 组长博客:点这里! 作业博客:点这里! 组员情况 组员1(组长):庄锡荣 过去两天完成了哪些任务 文字/口头描述 检测网站不合理的地方,给组员定下相应时间进度的安排 展示GitHub当 ...
- CEF拦截js层alert弹窗 OnJSDialog 《转》
一 引言 CEF3嵌入后,用JS 弹出Alert框,按钮错位,确定按钮勉强能看到.很难看.为了改善体验,决定重写提示框. 环境:VS2008 VC MFC. 二 原理 参看类 CefJSDia ...
- 公网IP地址就一定是A类地址和B类地址吗?那C类地址就一定是私有地址吗?
A,B,C三类中既有公网地址,也有私网地址:在A类地址中,10.0.0.0-10.255.255.255是私有地址.在B类地址中,172.16.0.0-172.31.255.255是私有地址.在C类地 ...
- Java多个线程顺序打印数字
要求 启动N个线程, 这N个线程要不间断按顺序打印数字1-N. 将问题简化为3个线程无限循环打印1到3 方法一: 使用synchronized 三个线程无序竞争同步锁, 如果遇上的是自己的数字, 就打 ...
- 009-MySQL循环while、repeat、loop使用
一.循环使用 mysql常见的三种循环方式:while.repeat和loop循环.还有一种goto,不推荐使用. 前提1.创建基本表结构 # 创建表结构 drop table if exists ` ...
- 2-1 CLI 工程结构
ng new 项目名称:去创建一个angular的项目 ng new pinduoduo 是否需要添加路由,选择否 选择传统的css rm -fr pinduoduo:删除刚才创建的项目 ng new ...
- DateUtil(2)
import java.sql.Timestamp; import java.text.ParseException; import java.text.SimpleDateFormat; impor ...
- 成为真正的win10 超级管理员,解决win+r 不以管理员身份运行
secpol.msc 本地策略=>安全选项 禁用 用户账户控制:以管理员批准模式运行所有管理员 用户帐户控制:用于内置管理员帐户的管理员批准模式 注意:需要重启计算机
- 判断命令test
判断命令test一般用于脚本当中,可以简写为中括号[ ].其会对跟随的条件进行判断,一般可以分为数值判断.字符串判断和文件判断.语法格式为test [判断条件]或[ 判断条件 ],注意中括号[ ]与判 ...
- 报错:ImportError: cannot import name "KafkaProducer" from "kafka"
报错背景: 在Pycharm中安装完成kafka-python之后,我开始在代码中引入kafka的包. from kafka import KafkaProducer 但是引入之后报错 报错现象: 报 ...