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判断软键盘是否开启弹出的更多相关文章
- Android手动控制软键盘的开启和关闭,判断软键盘是否显示;
工具类,拿走就能用: import android.annotation.TargetApi; import android.app.Activity; import android.content. ...
- 修改某个UITextField的键盘的返回键类型以及监听键盘的高度变化,取到键盘动画退出弹出的时间,一起随着键盘顶出来或者压下去,
1.修改某个UITextField的键盘的返回键类型: [_bottomTextView setReturnKeyType:UIReturnKeyDone]; 1.1.textFied点击return ...
- ionic 项目中ios上遇到的软键盘输入法自动弹出的问题
一. 安装插件 cordova plugin add ionic-plugin-keyboard 二. 软键盘显示监听 window.addEventListener('native.keyboar ...
- JavaScript:用JS实现加载页面前弹出模态框
用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...
- Android 判断软键盘弹出并隐藏的简单完美解决方案
最近项目中有一个编辑框,下面是个ListView.在触发编辑框弹出软键盘后,ListView还能滑动,并且ListView的item还能响应单击.这样的体验效果很不好.于是便想在滑动或单击item时判 ...
- js 点击input焦点不弹出键盘 PDA扫描枪
直接贴代码 1.利用input readonly属性 当input有readonly属性的时候,即使获取焦点,也不会吊起小键盘 扫码枪输入的间隔大概在15-60毫秒,然后手动输入的100-200毫秒之 ...
- layer.js,,,分享一个好用的弹出层
基本属性: <!DOCTYPE html> <html> <head> <head> <meta content="text/html; ...
- 工作当中实际运用(3)——js原生实现鼠标点击弹出div层 在点击隐藏
function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...
- JS应用实例3:定时弹出广告
在观看视频时候总会发现有广告弹出 这里就做一个类似这样的定时弹出广告的实例: 前面的JS代码和HTML写在同一个文件,实际开发中总是分开来写 用的时候引入即可 HTML代码: <!DOCTYPE ...
随机推荐
- Java面试基础知识(1)
1.final, finally, finalize的区别 final:修饰符(关键字)如果一个类被声明为final,没有子类也不能被继承.因此一个类不能既被声明为 abstract的,又被声明为fi ...
- @JsonView 简单介绍[z]
@JsonView是jackson json中的一个注解,Spring webmvc也支持这个注解. 这个注解的作用就是控制输入输出后的json. 假设我们有一个用户类,其中包含用户名和密码,一般情况 ...
- java的eclipse的使用
1下载eclipse地址:www.eclipse.org/downloads/ 解压就可安装 注意: 这可能你是没有安装java运行环境(jre或jdk) 直接www.java.com,下载就行 下一 ...
- VS2010,VS2012,VS2013中,无法嵌入互操作类型“……”,请改用适用的接口的解决方法
在VS2013开发环境下,C#引用COM组件遇到的两个问题: 一开始是COM组件没有注册导致代码引用报错,那么我就使用管理员的命令行方式下,入册COM组件: C:\WINDOWS\system32&g ...
- vue,angular,react框架对比
转载自:https://www.cnblogs.com/hubgit/p/6633214.html 首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Mod ...
- 团队作业之Rookie also want to fly
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 在时代的浪潮下,单人编程,结对编程已经无法满 ...
- linux命令行下执行循环动作
在当前子目录下分别创建x86_64 for dir in `ls `;do (cd $dir;mkdir x86_64);done
- Behance 大神推荐2019 年所有设计领域的最新趋势!
昨天国内设计界发生了一则重大新闻! 相信大家应该都听说了吧 Behance挂了··· 继续Pinteres之后 在一个设计师不用上班的周六 我的电脑默默打不开Behance了 也就是说大陆地区的ip地 ...
- Java 算法(一)贪心算法
Java 算法(一)贪心算法 数据结构与算法目录(https://www.cnblogs.com/binarylei/p/10115867.html) 一.贪心算法 什么是贪心算法?是指在对问题进行求 ...
- vue 获取跳转上一页组件信息
项目中有一需求,需要根据不同的页面路径url跳转进行不同的操作,首先需要获得上一页面的url,利用 beforeRouteEnter 这个钩子中的from参数获得之前url的信息,然后给 next 传 ...