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;
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-09-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读