九浪九 2021-06-30 13:27 采纳率: 83.3%
浏览 482
已采纳

移动端input输入时,页面被顶起往上移?

.改为[]获取

img 想达到这个效果如何做?点输入框时,移动端键盘弹起输入框被顶起,下面是一层不动?

  • 写回答

2条回答 默认 最新

  • MisterMister 2021-06-30 17:47
    关注

    $(function () { var bottomHeight=null; var documentHeight = null; //处理输入框被输入法遮挡的问题 $(document).on('focus', 'input[type="text"],input[type="password"],TEXTAREA', function (e){// 监听输入框是否选中 if (finedo.fn.isnon(documentHeight)) { documentHeight = $(document).height(); } var scrollT = document.documentElement.scrollTop || document.body.scrollTop; //滚动条的垂直偏移 var clientH = document.documentElement.clientHeight || document.body.clientHeight; //元素的可见高度 var scrollH = ""; //元素的整体高度

        var bodyScrollHeight = 0
        var documentScrollHeight = 0
        if (document.body) {
          bodyScrollHeight = document.body.scrollHeight
        }
        if (document.documentElement) {
          documentScrollHeight = document.documentElement.scrollHeight
        }
        // 当页面内容超出浏览器可视窗口大小时,Html的高度包含body高度+margin+padding+border所以html高度可能会大于body高度
        scrollH = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        
        if (scrollT >= scrollH - clientH) {//判断滚动条是否到底部
            bottomHeight = $(window).height() - $(this).height() - $(this).offset().top + $(document).scrollTop();// 当前选中元素距离屏幕底部距离
            if( bottomHeight < 300 ){//判断元素距离底部小于300
                /*var u = navigator.userAgent;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                if(isAndroid){*/
                if(getDeviceType() == "android"){
                  
                   // 若距离底部距离小于300
                   var a = $(document).height();
                   $('body').height( $(document).height()+300-bottomHeight);
                   var b = $(document).height();
                   
                   var height = e.delegateTarget.body.offsetHeight;
                   $('body').scrollTop(height);
                }
            }
        }    
    });
    
    $(document).on('blur', 'input[type="text"],input[type="password"],TEXTAREA', function (e){
        if( bottomHeight < 300 ){
            /*var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            if(isAndroid){*/
            if(getDeviceType() == "android"){
               $('body').height(documentHeight);
               bottomHeight = 0;
            }
        }
    });
    

    });

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 请问不小心下载到了钓鱼软件怎么办?
  • ¥15 求国博抢票 求国博抢票 有的私
  • ¥50 swiftui @query 报错
  • ¥50 怎么解决刷卡或扫码后,点击软件输入框,win10屏幕键盘不会自动弹出的问题
  • ¥15 如何使用arcgispro的训练深度模型,发现water和nowater精度为0?(相关搜索:深度学习)
  • ¥20 matlab作业不太懂呀有问题能给个代码吗
  • ¥15 自制电路图为何无法驱动ESP01S?
  • ¥15 前端加access数据库
  • ¥15 ARCGIS 多值提取到点 ERROR 999999
  • ¥15 mysql异常断电, [MY-011971] [InnoDB]