微信项目中，输入框被键盘遮挡的解决方案

最新推荐文章于 2022-02-25 10:22:52 发布

Ustupid741

最新推荐文章于 2022-02-25 10:22:52 发布

阅读量1.5w

点赞数

分类专栏：微信公众号文章标签：微信输入框被挡

本文链接：https://blog.csdn.net/Ustupid741/article/details/84791659

版权

微信公众号专栏收录该内容

3 篇文章 0 订阅

订阅专栏

// 解决输入框被挡住
var interval;
function scrollToEnd(){
    document.body.scrollTop = document.body.scrollHeight;
}
//userInput是自己定义的输入框 var userInput = document.getelementById('id');
userInput.addEventListener("focus",function () {
    interval = setInterval(function() {
        scrollToEnd();
    }, 1000);
});

//为什么会使用定时器呢？是因为，我发现有时候就算输入框弹出来之后，还是有可能会掉下去，所以就用定时器定时弹出来。这样解决会造成的问题就是，输入框里面的光标闪的频率有点快，对这个问题苛刻的朋友呢，可以增大定时器的时间，保持跟输入框光标的闪动频率一致就好了。还有就是，如果页面中有相对定位的元素，有可能会收到影响跟着闪，如果遇到这个问题，就把绝对定位改为固定定位吧。

//目前这个方式在大多键盘下都是可行，在个别还是有问题，比如苹果6p自带的全键盘。