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);
    
  • 相关阅读:
    Java RMI简单例子HelloWorld
    Java RMI远程方法调用
    javascript中通过replace函数搜索和替换指定字符串
    详解公钥、私钥、数字证书的概念
    标准MD5加密算法
    基于Spring Boot构建的Spring MVC快速入门
    http://jinnianshilongnian.iteye.com/blog/1996071
    双11也不要乱买书
    Mybatis 中的转义字符(转帖)
    【Maven】为什么Maven dependencies有的jar包显示为灰色?
  • 原文地址:https://www.cnblogs.com/aloneMing/p/13672959.html
Copyright © 2011-2022 走看看