js怎么监听移动端键盘展开事件

目的 : 监听移动端键盘展开事件

工具 : 移动端, js

思路 : 可以通过监听窗口大小的改变来实现,当端键盘展开时,窗口的大小发生改变,依据此基础进行判断

js 移动端关于页面布局，如果底部有position:fixed的盒子，又有input，当软键盘d出收起都会影响页面布局。这时候Android可以监听resize事件，代码如下，而iOS没有相关事件。

方法一实现代码:

//获取当前页面高度

var winHeight = $(window)height();   

$(window)resize(function(){

   var thisHeight=$(this)height();

    if(winHeight - thisHeight >50){

        //窗口发生改变(大),故此时键盘d出

         //当软键盘d出，在这里面 *** 作

    }else{

        //窗口发生改变(小),故此时键盘收起

        //当软键盘收起，在此处 *** 作

    }

});

方法二:监控键盘

监控的方式其实筛选下来也不过两种：

① 时钟setInterval不停监控

② 系统级别的监控，比如键盘出现时候通知window一个事件，但是很遗憾现在还没有这个事件，但是这个事件等于

input类元素获取焦点 == d出虚拟键盘

input类元素失去焦点 == 收起虚拟键盘

但是我们前面已经说过，上面的原则不一定可靠，所以该种方案也未必可靠了

基于系统监控这点，我们还可以监控resize事件或者scroll事件，但是经过我的测试，setInterval表现比较好于是，我们简单写一段代码，可靠是否满足需求：

windowalert = function (msg) {

  $('body')append('<div>' + msg + '</div>')

};

function fixedWatch(el) {

  if(documentactiveElementnodeName == 'INPUT'){

    elcss('position', 'static');

  } else {

    elcss('position', 'fixed');

  }

}

setInterval(function () {

  fixedWatch($('#headerview header'));

}, 500);

如上:移动端键盘展开事件即可被监听

对于元素的实际大小，offsetWidth和offsetHeight理解如下：

1增加边框，最终值会等于原本大小加上边框大小

2增加内边距，最终值会等于原本大小加上内边距大小

当软键盘d起触发resize时，屏幕的宽度不变，高度缩小；

而当旋转屏幕触发resize时，屏幕的宽和高是互换的，但数值不变。

根据这个特征就能区分resize是被何种事件触发的了。

js 里面有个事件，

事件里面有keyCode 属性，可以获取你按的键的键码。

documentonkeydown=function(ev){

var oEvent = ev || event;   //处理兼容

alert(oEventkeyCode);

};

Android SDK中没有提供任何API来直接获取软键盘的状态和软键盘的高度，网上很多资料说InputMethodManager的isActive()方法可以获取软键盘状态，不过实际测试发现，这个方法并没有什么用，如果它返回false，可以判断软键盘一定是隐藏的，但如果它返回true，软键盘既可能是显示的，也可能是隐藏的。所以并不能通过isActive()方法来判断软键盘究竟是显示还是隐藏的。要想获取软键盘的状态和软键盘的高度，只能通过间接方法实现。

监听当键盘将要出现时

OC版

[[NSNotificationCenter defaultCenter]addObserver:selfselector:@selector(keyboardWillShow:)name:UIKeyboardWillShowNotification object:nil];

[[NSNotificationCenter defaultCenter]addObserver:selfselector:@selector(keyboardWillHide:)name:UIKeyboardWillHideNotification object:nil];

- ( void )keyboardWillShow:(NSNotification )notification

{

//    //获取键盘的高度

//    NSDictionary userInfo = [notification userInfo];

//    NSValue value = [userInfo objectForKey:UIKeyboardFrameBeginUserInfoKey];

//    CGRect keyboardRect = [value CGRectValue];

//    int height = keyboardRectsizeheight;

    CGFloatcurkeyBoardHeight = [[[notificationuserInfo]objectForKey:@"UIKeyboardBoundsUserInfoKey"]CGRectValue]sizeheight;

          CGRectbegin = [[[notificationuserInfo]objectForKey:@"UIKeyboardFrameBeginUserInfoKey"]CGRectValue];

          CGRectend = [[[notificationuserInfo]objectForKey:@"UIKeyboardFrameEndUserInfoKey"]CGRectValue];

          // 第三方键盘回调三次问题，监听仅执行最后一次

        if (beginsizeheight>0&& (beginoriginy-endoriginy>0)){

             CGFloatkeyBoardHeight = curkeyBoardHeight;

             NSLog(@"第三次：%f",keyBoardHeight);

             [UIView  animateWithDuration:005 animations:^{

                 self countLb_bottomHconstant= keyBoardHeight+10sizeScale;

             }];

        }

}

- ( void )keyboardWillHide:(NSNotification)notificationswift版

{

    //获取键盘的高度

    NSDictionaryuserInfo = [notificationuserInfo];

    NSValue value = [userInfo objectForKey:UIKeyboardFrameEndUserInfoKey];

    CGRectkeyboardRect = [valueCGRectValue];

    int height = keyboardRectsizeheight;

    self countLb_bottomHconstant = 12sizeScale;

}

 NotificationCenterdefaultaddObserver(self,selector:#selector(keyBoardShow(noty:)),name:NotificationNameUIKeyboardWillShow,object:nil)

NotificationCenterdefaultaddObserver(self,selector:#selector(keyBoardHidden(noty:)),name:NotificationNameUIKeyboardWillHide,object:nil)

@objcfunckeyBoardShow(noty:Notification){guardletuserInfo=notyuserInfoelse{return}letvalue=userInfo["UIKeyboardFrameBeginUserInfoKey"]as!NSValueletkeyboardRect=valuecgRectValueletkeyboradHeight=keyboardRectsizeheight}

@objcfunckeyBoardShow(noty:Notification){guardletuserInfo=notyuserInfoelse{return}letvalue=userInfo["UIKeyboardFrameEndUserInfoKey"]as!NSValueletkeyboardRect=valuecgRectValueletkeyboradHeight=keyboardRectsizeheight}

参考:>

在 Android 里我们是无法直接获取软键盘高度的，但是在某些场景下，我们又需要获取软键盘的高度。我们可以使用 ViewTreeObserverOnGlobalLayoutListener 来监听窗口大小的变化，当软键盘d出时，窗口高度会变小，使用原始窗口高度减去当前窗口高度，就可以得出软键盘的高度了。

一般我们在 Activity 的 onCreate() 方法中开始监听：

请注意当 Activity 被销毁的时候，一定要移除监听，否则就会产生内存泄漏：

通过以上方法可以实时监听软键盘的高度变化，特别是像有些输入法例如搜狗，可以随时切换拼音输入、手写输入，这个时候软键盘的高度都会发生变化。

除此之外，还可以通过该方法判断软键盘是否d出。

以上就是关于js怎么监听移动端键盘展开事件全部的内容，包括:js怎么监听移动端键盘展开事件、关于js获取元素实际高度的问题、javascript获取软键盘d起&收回事件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！