[javascript] 解决移动端手机浏览器软键盘遮挡输入框问题

时间 2021-02-21

标签 css jquery 微信 this spa code blog console 栏目 JavaScript 繁體版

原文原文链接

在手机端常常有这样的需求 , 最下面是输入框相似微信输入框 , 咱们通常设置成了position:fixedcss

可是当点击到输入框的时候, 软键盘弹出来遮挡了输入框jquery

其实解决这个问题很是简单 , 那就是让body滚动到最底部 , 咱们给个滚动最大值就能够了微信

例以下面的jquery:this

                $(window).resize(function(){

                    $('body').scrollTop(99999999);

                });

当窗口大小变化时 , 滚动到最底部 ,微信也是这样的效果spa

$(window).resize(function(){
    var docheight = $(window).height();  /*唤起键盘时当前窗口高度*/
console.log(docheight,windheight);
    //_this.scrollBottom();
$('body').scrollTop(99999999);
    // if(docheight < windheight){            /*当唤起键盘高度小于未唤起键盘高度时执行*/
    //     $(".chatBoxSend").css("position","static");
    // }else{
    //     $(".chatBoxSend").css("position","fixed");
    // }});