Android原生键盘弹起,H5页面被压缩的两种解决方案

移动H5项目中,会出现input框获得焦点键盘弹出把页面元素顶上去压缩到一起,影响页面布局.

方案一：监听页面变化,动态的展示和隐藏底部被顶上来的内容

这种方法经调试还不算十分完美

// 监听Android键盘弹起
const listenKeybordAndroid = () => {
  ('监听键盘...')
  const originHeight =  || 
   = function () {
    // 键盘弹起与隐藏都会引起窗口的高度发生变化
    const resizeHeight =  ||         
                          ;
    if (resizeHeight < originHeight) {
      // 当软键盘弹起，在此处操作,控制被顶起的底部元素隐藏
       = false
    } else {
      // 当软键盘收起，在此处操作
       = true
    }
  }
}

方案二：监听页面变化，键盘弹起时将变化之前的高度赋值给压缩后的页面

        这种方法相对与第一种能更完善解决问题,就是先获取被影响的页面正常显示时的高度,在键盘被掉起时把这个正常的高度赋值给这个元素就行了,简单地说就是给予被挤压页面一个正常的高度值,具体见下面代码,其中 'content' 为我被影响的页面Id.

const clientHeight = ref(0)
 = ('content').clientHeight

// 监听Android键盘弹起
const listenKeybordAndroid = () => {
  ('监听键盘...')
  const originHeight =  || 
   = function () {
    // 键盘弹起与隐藏都会引起窗口的高度发生变化
    const resizeHeight =  || 
    if (resizeHeight < originHeight) {
      // 当软键盘弹起，在此处操作
      if () {
        ('content'). =  + 'px'
      }
      ('弹出...', ('content')., )
    } else {
      // 当软键盘收起，在此处操作
      ('content'). = '100%'
      ('收起...', ('content')., )
    }
  }
}