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;
    }
  • 相关阅读:
    九九乘法表及双色球
    错误 “SCRIPT7002: XMLHttpRequest: 网络错误 0x2ef3, ie浏览器兼容问题
    隐藏ie input的X和眼睛图标
    vue-cli解决兼容ie的es6+api问题
    git 本地tag和远程tag对应不上 vscode里pull不下代码
    git 计算commit
    git 查看对比的方法log diff
    git 版本回退方法
    git rebase的使用
    git 常规操作
  • 原文地址:https://www.cnblogs.com/zhuchenglin/p/7532503.html
Copyright © 2011-2022 走看看