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

標籤：寫法   val   focus   name   blur   nbsp   scroll   document   指點   

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

 

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