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;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏iOS122-移动混合开发研究院

PBJVision 快速在应用中集成相机/拍摄功能

PBJVision 简介 PBJVision, 是一个iOS相机操作的封装库,可以让你的应用快速简单地继承相机相关功能. 最新示例:点击下载 注意: 示例需要在...

2116
来自专栏九彩拼盘的叨叨叨

滑动到底部无限加载的实现

我们常常会碰到数据条数很多,需要分页显示的情况。对于移动端页面,我们一般会用每次滚动到接近页面底部时,加载更多(下一页)数据的方式。本文就来介绍下滑动到底部无限...

1032
来自专栏Objective-C

iOS-修改系统Tabbar背景色

2927
来自专栏技术博客

JavaScript 获取屏幕的高度和宽度

screen.availHeight:显示浏览器的屏幕的可用高度(这个可用高度不包括分配给半永久特性(如屏幕底部的任务栏)的垂直空间。)

922
来自专栏ios 技术积累

iOS中的事件的产生和传递

●发生触摸事件后,系统会将该事件加入到一个由UIApplication管理的事件队列中,为什么是队列而不是栈?因为队列的特点是FIFO,即先进先出,先产生的事件...

1161
来自专栏听雨堂

表格效果

//表格的属性 $("#tbl").attr("border","1").attr("cellSpacing","0").attr("cellPadding",...

23310
来自专栏游戏杂谈

仿Google+相册的动画

鼠标移入、移出时均有动画效果,咋一看估计是使用了css3的transform属性来实现动画效果的。

1721
来自专栏达摩兵的技术空间

移动web端常见bug汇总001

本文是摘录整理了移动端常见的一些bug以及解决方案,第一篇,后面还会有持续的文章更新整理。

1154
来自专栏阮一峰的网络日志

CSS使用技巧

在修改模板的过程中,需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章,我就把它整理出来,供自己参考,也希望对大家有用...

1811
来自专栏向治洪

React-Native组件之 Navigator和NavigatorIOS

对于app而言,一款应用往往涉及到很多的页面,而页面之间的跳转Android和iOS实现也各不相同。在iOS上,系统为我们提供了UINavigationCont...

2687

扫码关注云+社区

领取腾讯云代金券