zoukankan      html  css  js  c++  java
  • 手机端软键盘弹出挤压页面的问题

    解决这个问题的基本思路是:

    1、怎样监听软键盘弹起这个事件

    2、监听到这个事件后怎样操作才能让页面不被挤压

    一、解决在手机页面App中手机软键盘弹出软键盘挤压页面问题

    var originalHeight=document.documentElement.clientHeight || document.body.clientHeight;
        window.onresize=function(){
            var  resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
            //软键盘弹起与隐藏  都会引起窗口的高度发生变化
            if(resizeHeight*1<originalHeight*1&&isfocus==true){ //resizeHeight<originalHeight证明窗口被挤压了
               plus.webview.currentWebview().setStyle({
                    height:originalHeight
               });
            }
        } 
    plus.webview.currentWebview().setStyle({
      softinputMode: "adjustResize"  // 弹出软键盘时自动改变webview的高度
    });

    二、解决在浏览器中打开网页软键盘挤压页面问题

    //获取原始窗口的高度
    var isfocus=false;
    var originalHeight=document.documentElement.clientHeight || document.body.clientHeight;
    window.onresize=function(){
        var  resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
        //软键盘弹起与隐藏  都会引起窗口的高度发生变化
        if(resizeHeight*1<originalHeight*1&&isfocus==true){ //resizeHeight<originalHeight证明窗口被挤压了
        $('.hideBtn').css('display','none');
        }else{
            $('.hideBtn').css('display','block'); 
        }
    } 
    $("input").focus(function(){
        isfocus=true;
         
    });
    $("input").blur(function(){
        isfocus=false;
    })
  • 相关阅读:
    BZOJ3503: [Cqoi2014]和谐矩阵
    不常用的黑科技——「三元环」
    解题:八省联考2018 劈配
    解题:EXNR #1 金拱门
    解题:八省联考2018 林克卡特树
    解题:AT2064 Many Easy Problems&EXNR #1 T3 两开花
    解题:SPOJ 422 Transposing is Even More Fun
    解题:SDOI 2017 硬币游戏
    解题:CTSC 2006 歌唱王国
    解题:BZOJ 3622 已经没有什么好害怕的了·
  • 原文地址:https://www.cnblogs.com/zhaoqiming/p/7997587.html
Copyright © 2011-2022 走看看