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
原文：https://blog.csdn.net/u012982629/article/details/81905894
版权声明：本文为博主原创文章，转载请附上博文链接！

转载于:https://www.cnblogs.com/xiaoshen666/p/11005020.html

h5 移动端监听软键盘弹起、收起相关推荐

h5 移动端监听软键盘弹起、收起
前面一篇博客 h5 安卓键盘弹起界面适配修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化 window.onresize事件来做突破点的,但是i ...
h5(移动端) 监听软键盘弹起、收起
https://blog.csdn.net/qq_38296051/article/details/109290225 https://blog.csdn.net/qq_42231156/articl ...
H5 (React) 移动端监听软键盘弹起、收起
前言:H5 有时底部按钮是固定定位,当页面上面需要用到输入内容时,会弹起软键盘,然后把底部固定的按钮也弹起来了,我们希望弹起软键盘时,底部的固定定位按钮隐藏,这里就需要对移动端软键盘弹起收起进行监听. ...
android 代码设置键盘适应_Android自适应软键盘的Dialog以及监听软键盘弹起
最近项目中遇到一个需求:新手引导.跟一般的新手引导没有什么太大区别,思路都是搞一个带阴影的遮罩层,然后在上边儿给一些提示性的文字,由于需求中有些特殊的地方,所以我用了一个全屏的dialog(而且,di ...
【Android应用】【监听软键盘弹起与关闭】
[背景] 在很多App开发过程中需要在Activity中监听Android设备的软键盘弹起与关闭,但是Android似乎没有提供相关的的监听API给我们来调用,本文提供了一个可行的办法来监听软键盘的弹 ...
android 键盘隐藏监听,安卓监听软键盘弹出与隐藏的两种方法
需求: 现在有一个需求是点击一行文本框,弹出一个之前隐藏的输入框,输入完成后按返回键或者其他的东西隐藏键盘和输入框,将输入框的内容填充到文本框中. 实现: 拿到这个需求的第一反应就是写一个监听来监听键 ...
uni-app textarea解决点击软键盘上自带收起按钮输入框没有取消焦点的问题（监听软键盘自带收起按钮）
问题描述: 输入框弹起之后点击软键盘自带的收起按钮,发现输入框并没有取消焦点问题导致: 再次点击输入框进行内容输入的时候软键盘弹起输入框不显示问题解决: <textarea cursor- ...
Android App监听软键盘按键的三种方式（转）
最近有类似需求,在csdn上刚好发现,粘贴过来,以防止忘记喽前言: 我们在android手机上面有时候会遇到监听手机软键盘按键的时候,例如:我们在浏览器输入url完毕后可以点击软键盘右下角的&quo ...
Android App监听软键盘按键的三种方式
前言: 我们在android手机上面有时候会遇到监听手机软键盘按键的时候,例如:我们在浏览器输入url完毕后可以点击软键盘右下角的"GO"按键加载url页面:在点击搜索框的时候,点 ...

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

h5 移动端监听软键盘弹起、收起相关推荐

最新文章

热门文章

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

h5 移动端 监听软键盘弹起、收起相关推荐

最新文章

热门文章

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

h5 移动端监听软键盘弹起、收起相关推荐