本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-03(364)

2021-04(182)

2021-05(181)

2021-06(95)

2021-07(12)

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

发布于2021-03-10 18:38     阅读(503)     评论(0)     点赞(27)     收藏(2)


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

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

 

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

例如下面的jquery:

                $(window).resize(function(){

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

                });

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

 

 

 

 

$(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");
// }
});

原文链接:https://www.cnblogs.com/taoshihan/p/14420202.html




所属网站分类: 技术文章 > 博客

作者:大哥你来啦

链接:http://www.qianduanheidong.com/blog/article/34339/c839afb2983f58227b86/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

27 0
收藏该文
已收藏

评论内容:(最多支持255个字符)