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;
    }
  • 相关阅读:
    fedora20安装hadoop-2.5.1
    超简单fedora20(linux)下JDK1.8的安装
    解决A program file was not specified in the launch configuration.问题
    java中的四则运算
    spring util命名空间
    java中常用的数据加密算法
    C语言实现栈
    百度ueditor富文本编辑器的使用
    C#进程管理程序实现
    ABP领域层-仓储
  • 原文地址:https://www.cnblogs.com/zhuchenglin/p/7532503.html
Copyright © 2011-2022 走看看