zoukankan      html  css  js  c++  java
  • 移动端H5解决键盘弹出时之后滚动位置发生变化的问题

    前言

    移动端H5在一个长屏的滚动过程中,一旦涉及到输入的文本框,弹出键盘后,滚动位置经常会发生变化,这个时候需要去捕获移动端键盘弹出前后的事件去做一下记录当前滚动状态并恢复的处理。

    实现

    由于ios和安卓的键盘弹出时的处理机制其实是不一样的,所以需要针对不用系统做相应的处理。

    ios

    ios主要就是监听document.body的focusin和focusout事件来处理。

    function handleFocus() {
          // 此时为键盘弹出时
    }
    
    function handleBlur() {
          // 此时为键盘收起时
    }
    
    document.body.addEventListener('focusin', handleFocus);
    document.body.addEventListener('focusout', handleBlur);
    

    安卓

    安卓的键盘弹出和收起会直接改变webview的高度,所以需要监听resize事件。所以安卓的如果要记录当前滚动位置还不能直接在事件监听中去做,需要在键盘还没调起来之前就提前记录下scrollTop的值,因为键盘一旦调起,webview的高度就会变了,记录的scrollTop就是不准确的。

       resizeHandler = (e) => {
            const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
            const activeElement = document.activeElement;
            if (resizeHeight < this.originHeight) {
                // 键盘弹起后逻辑
                if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")) {
                }
            } else {
                // 键盘收起后逻辑
            }
        }
    
        componentWillMount() {
            const stateObj = sessionStorage.getItem('scrollbox_state');
            if(stateObj) {
                const obj = JSON.parse(stateObj);
                const { pageIndex, maxIndex } = obj;
                this.setState({
                    pageIndex, 
                    maxIndex
                })
            }
        }
    window.addEventListener('resize', resizeHandler);
    
  • 相关阅读:
    sql函数
    设为首页代码
    百度联盟包括百度网站搜索联盟
    PHPCMS 整站代码分析讲解
    rational rose 2003下载及破解文件
    rational rose 2003下载及破解文件
    SQL中IN,NOT IN,EXISTS,NOT EXISTS的用法和差别
    [转贴]RUP与XP的平衡之道
    踏踏实实做人,老老实实做事
    用LoadRunner下载文件并保存到本地
  • 原文地址:https://www.cnblogs.com/aloneMing/p/13672959.html
Copyright © 2011-2022 走看看