移动端输入框获取焦点时,唤醒手机键盘挡住输入框以及ios系统键盘回滚

移动端输入框获取焦点时,唤醒手机键盘挡住输入框以及ios系统键盘回滚，造成用户体验不好

• 先附上问题图片 , 后面附上代码以及代码图片
• 使用 scrollIntoView 等都不生效…
• 在开发中 , 经常会碰到一些问题, 找过一些资源 , 都没有得到解决,干脆自己想想原因动手写 ;
• 大佬勿喷 , 谢谢指点 . 分享互相学习 . 感谢 csdn 提供平台 ! 周末愉快 !!!

安卓端问题图片 :

修改后的图片:

ios 系统键盘回滚 :

问题图片 :

修改后正常显示 :

• 只能提供 vue 组件方法中的解决方法代码 :

 handleScroll() {
        // 判断是否为安卓手机
        var u = navigator.userAgent
        if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
          // 安卓系统
          if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
            // 获取初始化屏幕可视区高度
            var initHeight = document.documentElement.clientHeight
            window.onresize = function() {
              // 获取键盘弹出后的屏幕的可视区高度
              var currentHeight = document.documentElement.clientHeight
              if (initHeight > currentHeight) {
                // 弹出键盘的高度 = 初始化可视区高度 - 窗口发生改变后的屏幕可视区高度
                var keyboardHeight = initHeight - currentHeight
                //  赋值给所有元素外的大盒子样式; 等于弹出键盘的高度; (( 样式赋值给外面的大盒子很重要 ))
                document.getElementById('count').style.marginTop = '-' + keyboardHeight + 'px'
              } else {
                // 如果条件不成立,则说明已经失焦,样式回到正常
                document.getElementById('count').style.marginTop = '0px'
              }
            }
          }
        } else {
          // ios 系统 (失去焦点时滚动距离)
          document.addEventListener('blur', (e) => {
            document.body && (document.body.scrollTop = 0)
            let currentPosition
            currentPosition = document.documentElement.scrollTop || document.body.scrollTop
            window.scrollTo(0, currentPosition)
          }, true)
        }
      },

每个人碰到的场景不同 , 如果以上代码, 思路, 没有帮到你 , 可以把问题分享出来 , 大家相互学习 , 一起解决 !!!