js解决软键盘遮挡输入框的问题分享
更新时间：2017年12月19日 14:28:40 作者：vcxiaohan2
下面小编就为大家推荐一篇js解决软键盘遮挡输入框的问题分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
经验须知
弹出软键盘时：
ios端$(‘body').scrollTop()会改变
android端$(window).height()会改变
拉起键盘不是一瞬间，而是有一个缓动过程
问题重现
ios端，经常会出现输入法遮挡输入框的问题(特别是那种有一个白色顶部的输入法，如：百度输入法)，如图：
问题解决
我们只需要在输入框聚焦之后，开启一个定时器，执行$(‘body').scrollTop(1000000)，这样由于整个body滚动到了最下面，输入框自然就看见了，具体请查看以下示例
示例源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>demo</title>
<script src="../js/jquery-1.11.3.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
}
.bottom {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
font-size: 0;
}
input {
font-size: 14px;
box-sizing: border-box;
width: 50%;
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
<div class="bottom">
<input class="aInput" type="text" placeholder="ios聚焦后会被输入法遮挡" />
<input class="bInput" type="text" placeholder="ios聚焦后不会被输入法遮挡" />
</div>
</body>
<script>
$(function() {
// 解决输入法遮挡
var timer = null;
$('.bInput').on('focus', function() {
clearInterval(timer);
var index = 0;
timer = setInterval(function() {
if(index>5) {
$('body').scrollTop(1000000);
clearInterval(timer);
}
index++;
}, 50)
})
});
</script>
</html>
以上这篇js解决软键盘遮挡输入框的问题分享就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Javascript对象Clone用法,实例分析了javascript对象克隆的相关技巧,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了js实现的全国省市二级联动下拉选择菜单,以一个完整实例形式较为详细的分析了javascript实现省市二级联动下拉菜单的实现技巧,非常简单实用,需要的朋友可以参考下2015-08-08
斐波那契是自然界与社会中存在的一种数学规律,下面这篇文章主要给大家介绍了关于如何用typescript类型来推算斐波那契的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
说到函数式编程，人们的第一印象往往是其学院派，晦涩难懂，大概只有那些蓬头散发，不修边幅，甚至有些神经质的大学教授们才会用的编程方式。2010-06-06
Data()日期对象是一个构造函数,必须使用new来调用创建我们的日期对象,下面这篇文章主要给大家介绍了关于JS中Date的一些常用方法,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了JavaScript调用客户端Java程序的方法,实例分析了javascript调用java程序的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
Omar AL Zabir这位MVP总是喜欢搞些稀奇古怪同时又很实用的小东西，并且还十分值得参考。最近他就做了一个叫做ensure的小工具用于动态加载JavaScript、CSS与HTML，而且IE、Firefox、Opera、Safari都支持了，那么我们就来看看ensure是如何做到动态加载JavaScript与CSS的。2008-09-09
几乎每个app都会用到底部导航的,相对于小程序而言自然也是如此了,这篇文章主要给大家介绍了关于微信小程序底部tabBar遮挡内容的简单处理方法,需要的朋友可以参考下2021-08-08
这篇文章介绍了JavaScript获取字符串实际长度(包含中英文)的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
如何在uniapp中获取可视区域的高度(uni.getSystemInfo)
这篇文章主要给大家介绍了关于如何在uniapp中获取可视区域的高度(uni.getSystemInfo)的相关资料,文中通过图文以及实例代码介绍的非常详细,对大家学习或者使用uniapp具有一定的参考学习价值,需要的朋友可以参考下2023-04-04
最新评论