前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[javascript] 解决移动端手机浏览器软键盘遮挡输入框问题

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

作者头像
唯一Chat
发布2021-02-25 16:37:36
1.5K0
发布2021-02-25 16:37:36
举报
文章被收录于专栏:陶士涵的菜地陶士涵的菜地

在手机端经常有这样的需求 , 最下面是输入框类似微信输入框 , 我们一般设置成了position:fixed

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

其实解决这个问题非常简单 , 那就是让body滚动到最底部 , 我们给个滚动最大值就可以了

例如下面的jquery:

代码语言:javascript
复制
                $(window).resize(function(){

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

                });

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

代码语言:javascript
复制
$(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");
    // }
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-02-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档