h5页面在移动端dom被键盘顶起问题剖析

原创已于 2024-12-03 23:26:06 修改 · 602 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#计算机外设

于 2024-12-03 23:06:40 首次发布

h5页面在移动端dom被键盘顶起问题

背景

背景

h5页面在ios端和android端弹起或收起键盘时页面表现并非一致，

IOS：

键盘处于页面的最上层，当键盘弹起时，页面高度不会变化，布局贴底dom结构也不会被顶起来。

android:

键盘弹起时页面高度会发生变化，布局贴底的dom结构的元素会跟随页面高度见效而向上被顶起。

所以当页面有输入组件时（input、textare），在两端表现不一致呢

解决方案

ios

页面高度不变，dom结构正常布局不需要处理

android

1. 通过监听Input的聚焦、失焦，隐藏被顶起的dom

但是！！某些机型、某些输入法，收起键盘并不会触发输入框的 blur 失焦事件，傻逼。

2. 监听页面高度变化，从而判断键盘状态

react 为例

  const focus = () => {
        setFocusFlag(true) //聚焦
        const viewport = window.visualViewport
        viewport!.addEventListener('resize', () => {
            //ios 键盘不会影响clientHeight 的高度
        if (platForm() === 'iOS') {
        //有需要的话，获取键盘高度
            const distance = window.innerHeight - visualViewport!.height
           
        }

        const clientHeight = window.document.documentElement.clientHeight
        //安卓 键盘会影响clientHeight 的高度, input 并且不会失去焦点，故根据clientHeight 判断是否收起键盘
        if (platForm() === 'android') {
            if (clientHeight === initClientHeight) {
                //收起键盘
                setFocusFlag(false)
            } else {
                //展开键盘
                setFocusFlag(true)
            }
        }
        })
    }
     const blur = () => {
        window.onresize = null
        setFocusFlag(false)
    }

附件

判断环境


//判断环境
export function platForm() {
    let platForm = 'H5'
    const u = navigator.userAgent.toLowerCase()
    if (u.includes('miniprogram')) {
        platForm = 'WxMiniApp'
    } else if (/android/i.test(u)) {
        platForm = 'android'
    } else if (/iPad|iPhone|iPod/i.test(u)) {
        platForm = 'iOS'
    }

    return platForm
}