专栏首页LIN_ZONEIOS系统下虚拟键盘遮挡文本框问题的解决

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 条评论
登录 后参与评论

相关文章

  • Golang中的RPC(转载)

    GitHub: https://github.com/zhuchenglin/gorpc

    lin_zone
  • PHP 常用设计模式 (转载)

    单例模式顾名思义,就是只有一个实例。作为对象的创建模式, 单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例。

    lin_zone
  • ubuntu的apt-get install的默认安装路径(转)

    deb是debian linus的安装格式,跟red hat的rpm非常相似,最基本的安装命令是:dpkg -i file.deb或者直接双击此文件

    lin_zone
  • JavaScript基础学习--零碎

    1、如果WINDOW对象是常规HTML页面,TOP就是SELF       var top = document.getElementById('top'); ...

    用户1148399
  • 博客园美化博客随笔目录

    小小咸鱼YwY
  • 一篇文章详解React Native初始化和通信机制

    开始准备写这一篇文章的时候,中国的新型冠状病毒肺炎疫情还在继续,累积确诊81058人,现存确诊10827人。这篇文章写完的时候,累计确诊81501人,现存确认5...

    VV木公子
  • JavaScript动态图片热区(绘制多个矩形并分别跳转链接)

    不知道大家有没有遇到一张图片上面有很多个商品展示图,需要给每个商品添加一个链接,点击跳转到各自商品详情页。 这个需求在前端其实有一个专业的术语“图像地图”,大...

    Javanx
  • Python编程思想(28):限制类的动态特性(__slots__属性)

    李宁老师已经在「极客起源」 微信公众号推出《Python编程思想》电子书,囊括了Python的核心技术,以及Python的主要函数库的使用方法。读者可以在「极客...

    蒙娜丽宁
  • 【SAS Says】基础篇:8. 相关、回归等初步统计

    SAS是一个专业的统计软件,前面我们介绍了很多数据管理、输出美化的东西,本节终于要介绍一点SAS做统计的知识了,不过,在基础篇中我们只大概介绍一下,更多统计分析...

    数说君
  • 【SAS Says】基础篇:基本统计、相关分析与回归分析

    特别说明:本节【SAS Says】基础篇:SAS宏初步,用的是数说君学习《The little SAS book》时的中文笔记,我们认为这是打基础的最好选择 S...

    数说君

扫码关注云+社区

领取腾讯云代金券