IOS系統下虛擬鍵盤遮擋文本框問題的解決

最近在項目中發現同樣的代碼在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;
}