zoukankan      html  css  js  c++  java
  • h5 移动端 监听软键盘弹起、收起

    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()){
    
      }
    })

    vue项目代码:

        methods: {
          // input聚焦
          iptFocus(){
            // ios
            if(this.isIos()) this.isFocus = true;
          },
          // input失去焦点
          iptBlur(){
            // ios
            if(this.isIos()) this.isFocus = false;
          },
          isIos(){
            var m = navigator.userAgent;
            var isIos = !!m.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
            let result = isIos ? true : false;
            return result;
          },
          // android
          handleResize(){
            var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
            if(resizeHeight < this.originHeight){
              //当软键盘弹起,在此处操作
              if(!this.isIos()) this.isFocus = true;
            }else{
              //当软键盘收起,在此处操作
              if(!this.isIos()) this.isFocus = false;
            }
          },
        }
    mounted(){
        this.originHeight = document.documentElement.clientHeight || document.body.clientHeight;
        window.addEventListener('resize',this.handleResize);
    }

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

  • 相关阅读:
    jquery选择器
    frameset的target属性
    最长回文子串 南邮NOJ 1100
    最长回文子串 南邮NOJ 1100
    最长回文子串 南邮NOJ 1100
    NOJ 蛇形填数 1094
    NOJ 蛇形填数 1094
    NOJ 蛇形填数 1094
    NOJ 蛇形填数 1094
    开灯问题 南邮NOJ 1589 (另一种解法)
  • 原文地址:https://www.cnblogs.com/rachelch/p/12858938.html
Copyright © 2011-2022 走看看