zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    第五章课后练习题
    第四章课后练习
    函数
    变量、常量及类型
    go环境搭建及编辑器安装
    Matplotlib(绘图和可视化)
    Pandas例题(以NBA球队为例)
    Pandas
    Numpy
    jupyter notebook编辑器的用法
  • 原文地址:https://www.cnblogs.com/zhuchenglin/p/7532503.html
Copyright © 2011-2022 走看看