zoukankan      html  css  js  c++  java
  • 安卓虚拟键盘挡住input框解决办法

    问题描述:ios弹出虚拟键盘的时候会自动将页面顶上去,不会遮住input输入框,而安卓则会挡住。

    解决办法:

    1.使用如下代码来区分安卓,存入localStorage中

    if ((navigator.userAgent.match(
                    /(Android)/i
                ))) {
                /*你的手机版*/
                localStorage.setItem("noPC", true);
            }
     
    2.判断是安卓端,监听input输入框聚焦事件,input聚焦必定弹出虚拟框,此时给页面加padding-bottom使页面可滚动(因为页面(容器)可滚动时scrollIntoView()才有用!),再使用scrollIntoView()使input框滚动到可视区域,代码如下
    $('input').on("focus", function() {
            if (localStorage.getItem("noPC")) {
                $("#chagePWD").css({
                    "padding-bottom": "400px",
                })
                setTimeout(() => {
                    const activeElement = document.activeElement;
                    activeElement.scrollIntoView(); //焦点元素滚到可视区域
                }, 200);
            }
        });
     
    3.监听input输入框失去焦点事件,虚拟键盘收起,页面恢复原样,代码如下
    $('input').on("blur", function() {
            if (localStorage.getItem("noPC")) {
                $("#chagePWD").css("padding-bottom", "0px")
            }
        });
     
    在各安卓手机和安卓平板上亲测兼容良好
     
     

    scrollIntoView()的解释:

    scrollIntoView是一个与页面(容器)滚动相关的API(官方解释),该API只有boolean类型的参数能得到良好的支持(firefox 36+都支持),所以在这里只讨论参数Boolean类型的情况。

    调用方法为 element.scrollIntoView() 参数默认为true。

    参数为true时调用该函数,页面(或容器)发生滚动,使element的顶部与视图(容器)顶部对齐;

    参数为false时,使element的底部与视图(容器)底部对齐。

    TIPS:页面(容器)可滚动时才有用!

     
  • 相关阅读:
    django之session cookie
    自定义分页器
    Django与AJAX
    django之Models里常用小参数choices
    django之跨表查询及添加记录
    django之数据库表的单表查询
    ACM-ICPC 2018 徐州赛区网络预赛 B BE, GE or NE(博弈,记忆化搜索)
    ACM-ICPC 2018 徐州赛区网络预赛 A Hard to prepare
    hdu6365 2018 Multi-University Training Contest 6 1004 Shoot Game
    hdu6444 2018中国大学生程序设计竞赛
  • 原文地址:https://www.cnblogs.com/yszblog/p/14931272.html
Copyright © 2011-2022 走看看