IOS系统下虚拟键盘遮挡文本框问题的解决

Posted 2020-10-07 lin_zone

最近在项目中发现同样的代码在android端微信网页中点击文本框唤出的虚拟键盘不会遮挡文本框，但是在ios端的微信网页中点击文本框唤出的键盘却在大部分情况下会遮挡文本框

经过高人指点，这个问题终于解决了

下面说说解决办法：

主要代码

 

document.body.scrollTop = document.body.scrollHeight;

 

然后在文本框获取焦点的时候，可以定义一个计时器，一直执行上面的那句话

在文本框失去焦点的时候，就把之前的计时器清除掉即可

js写法：

let interval;

//获取文本框对象
let text = document.getElementById(‘text‘).getElementsByTagName(‘textarea‘)[0];
//消息框获取焦点
text.onfocus = function () {
    interval = setInterval(function () {
        scrollToEnd();
    }, 500)
};

//消息框失去焦点
text.onblur = function () {
    clearInterval(interval);
};

//滚动到底部
function scrollToEnd() {
    document.body.scrollTop = document.body.scrollHeight;
}

 

jquery写法：

let interval;
let text = $(‘#text textarea‘);
//消息框获取焦点
text.focus (function(){
    interval = setInterval(function () {
        scrollToEnd();
    }, 500)
});

//消息框失去焦点
text.onblur(function () {
    clearInterval(interval);
});

//滚动到底部
function scrollToEnd() {
    document.body.scrollTop = document.body.scrollHeight;
}