移动web 怎么捕获虚拟键盘弹出和关闭事件

 我来答
记忆e偶尔雨
高粉答主

2018-04-11 · 醉心答题,欢迎关注
知道大有可为答主
回答量:600
采纳率:89%
帮助的人:42.5万
展开全部

1、当虚拟键盘弹出的时候,window的resize事件会被触发,问题里的input是使用position:fixed吗,如果是position: fixed,在resize触发时应该会自动调整位置吧。

2、以下js可以实现此效果:

var wHeight = windows.innerHeight;   //获取初始可视窗口高度

$(window).resize(function() {         //监测窗口大小的变化事件

var hh = windows.innerHeight;     //当前可视窗口高度

var viewTop = $(window).scrollTop();   //可视窗口高度顶部距离网页顶部的距离

if(wHeight > hh){           //可以作为虚拟键盘弹出事件

$("body,html").animate({scrollTop:viewTop+100});    //调整可视页面的位置

}else{         //可以作为虚拟键盘关闭事件

$("body,html").animate({scrollTop:viewTop-100});

}

wHeight = hh;

});

xiangjuan314
2016-03-30 · TA获得超过3.3万个赞
知道大有可为答主
回答量:2.9万
采纳率:0%
帮助的人:2899万
展开全部
当虚拟键盘弹出的时候,window的resize事件会被触发(至少我的Android手机是这样)

问题里的input是使用position:fixed吗,如果是position: fixed,在resize触发时应该会自动调整位置吧。

// 以下代码用于直接将文档流中的元素移动到视区内,Android5.0+有效(只测了5.0和5.1,其他未知),IOS没测过。

element.scrollIntoView()

====================================================================
监听input元素的focus事件,以及window的resize事件。因为focus事件将在resize事件前触发。
在focus事件中,将获得焦点的input元素保存变量中。
在resize事件中,获得浏览器可视区域的top和bottom。
获得浏览器可视区域的位置:

var viewTop = $(window).scrollTop(), // 可视区域顶部
viewBottom = viewTop + window.innerHeight; // 可视区域底部

// 不使用jQuery

var viewTop = document.body.scrollTop,
viewBottom = viewTop + window.innerHeight;

获得元素的在文档中的位置:

var elementTop = $element.offset().top, // $element是保存的input
elementBottom = elementTop + $element.height();

// 不使用jQuery

/* 获得元素的位置信息 */
var getElementPosition = function(elem) {
var defaultRect = {top: 0, left: 0};
var rect = (elem.getBoundingClientRect && elem.getBoundingClientRect()) || defaultRect;
var ret = {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}
return ret;
}
var elementTop = getElementPosition(element).top, // 元素顶部位置
elementBottom = elementTop + element.clientHeight; // 元素底部位置

// 小结一下
document.body.scrollTop获得当前body滚动的位置。
getBoundingClientRect()获得element相对于viewport的位置
从上面的代码中看到其实:
判断元素是否在可视区域内,直接使用element.getBoundingClientRect()就好(* ̄∇ ̄*)

调整视窗位置

$(window).scrollTop(value); // 调整value

// 不使用jQuery

window.scrollTo(0, value); // 调整value

调整到想要的效果。

我的Android手机上,当input获得焦点的时候,浏览器好像会自动移动input到可视区域内。
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式