失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > h5 移动端 监听软键盘弹起 收起

h5 移动端 监听软键盘弹起 收起

时间:2018-07-31 11:09:51

相关推荐

h5 移动端 监听软键盘弹起 收起

前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化

window.onresize事件来做突破点的,但是ios中软键盘的弹起收起并不触发window.onresize事件。

总结:

1.在ios中软键盘弹起时,仅会引起$(‘body’).scrollTop值改变,但是我们可以通过输入框的获取焦点情况来做判断,但也只能在ios中采用这个方案,因为在android中存在主动收起键盘后,但输入框并没有失焦,而ios中键盘收起后就会失焦;

2.在android中软键盘弹起或收起时,会改变window的高度,因此监听window的onresize事件;

一、Android

//获取原窗口的高度

var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;

window.οnresize=function(){

//键盘弹起与隐藏都会引起窗口的高度发生变化

var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;

if(resizeHeight-0<originalHeight-0){

//当软键盘弹起,在此处操作

}else{

//当软键盘收起,在此处操作

}

}

二、ios

focusin和focusout支持冒泡,对应focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡,focus和blur不会冒泡,这样就可以使用事件代理,处理多个输入框存在的情况。

document.body.addEventListener('focusin', () => {

//软键盘弹出的事件处理

if(isIphone()){

}

})

document.body.addEventListener('focusout', () => {

//软键盘收起的事件处理

if(isIphone()){

}

})

---------------------

作者:少华一号

来源:CSDN

原文:/u012982629/article/details/81905894

版权声明:本文为博主原创文章,转载请附上博文链接!

如果觉得《h5 移动端 监听软键盘弹起 收起》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。