zoukankan      html  css  js  c++  java
  • 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.onresize=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
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    IOS中NSUserDefaults的用法(轻量级本地数据存储)
    ios:Failed to instantiate the default view controller for UIMainStoryboardFile 'Main'
    NSCocoaErrorDomain Code=3840 "The operation couldn’t be completed. (Cocoa error 3840.)"
    使用AFNetworking 报错提示
    对比iOS网络组件:AFNetworking VS ASIHTTPRequest(转载)
    iOS
    如何理解语言的跨平台性
    R语言演示功能
    R 字符串处理函数
    来自 Google 的 R 语言编码风格指南
  • 原文地址:https://www.cnblogs.com/xiaoshen666/p/11005020.html
Copyright © 2011-2022 走看看