美文网首页
移动端输入文字时键盘弹起遮挡input解决方案

移动端输入文字时键盘弹起遮挡input解决方案

作者: zkzhengmeng | 来源:发表于2023-08-30 11:42 被阅读0次

    1.判断机型 (ios/ andriod)

    // 判断手机 - ios/andriod
    function isIOS() {
      const u = navigator.userAgent;
      return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    }
    

    2.针对不同机型调用不同方法

    /**
      * 调用上面方法判断用户机型
      */
    
    function judgeInput() {
      if (isIOS()) {//ios处理逻辑
        window.addEventListener('focusin', function () {
          console.log('ios===',document.activeElement.tagName);
          if (
            document.activeElement.tagName === 'INPUT' ||
            document.activeElement.tagName === 'TEXTAREA'
          ) {
            setTimeout(function () {
              document.documentElement.scrollTop = document.body.scrollHeight;
            }, 0);
          }
        });
      } else {//andriod处理逻辑
        window.addEventListener('resize', function () {
          console.log('andriod===',document.activeElement.tagName);
          if (
            document.activeElement.tagName === 'INPUT' ||
            document.activeElement.tagName === 'TEXTAREA'
          ) {
            setTimeout(function () {
              document.activeElement.scrollIntoView();
            }, 0);
          }
        });
      }
    }
    
    

    相关文章

      网友评论

          本文标题:移动端输入文字时键盘弹起遮挡input解决方案

          本文链接:https://www.haomeiwen.com/subject/tctamdtx.html