zoukankan      html  css  js  c++  java
  • [javascript] 解决移动端手机浏览器软键盘遮挡输入框问题

    在手机端经常有这样的需求 , 最下面是输入框类似微信输入框 , 我们一般设置成了position:fixed

    但是当点击到输入框的时候, 软键盘弹出来遮挡了输入框

    其实解决这个问题非常简单 , 那就是让body滚动到最底部 , 我们给个滚动最大值就可以了

    例如下面的jquery:

                    $(window).resize(function(){
    
                        $('body').scrollTop(99999999);
    
                    });

    当窗口大小变化时 , 滚动到最底部 ,微信也是这样的效果

    $(window).resize(function(){
    var docheight = $(window).height(); /*唤起键盘时当前窗口高度*/
    console.log(docheight,windheight);
    //_this.scrollBottom();
    $('body').scrollTop(99999999);
    // if(docheight < windheight){ /*当唤起键盘高度小于未唤起键盘高度时执行*/
    // $(".chatBoxSend").css("position","static");
    // }else{
    // $(".chatBoxSend").css("position","fixed");
    // }
    });

    开源作品

    GO-FLY,一套可私有化部署的免费开源客服系统,安装过程不超过五分钟(超过你打我 !),基于Golang开发,二进制文件可直接使用无需搭开发环境,下载zip解压即可,仅依赖MySQL数据库,是一个开箱即用的网页在线客服系统,致力于帮助广大开发者/中小站长快速整合私有客服功能
    github地址:go-fly
    官网地址:https://gofly.sopans.com

    赞赏作者

    微信交流

  • 相关阅读:
    java入门学习(二)
    java入门学习(一)
    python3之数据类型
    pip基础用法
    python中的序列化与反序列化
    python装饰器
    python WEB接口自动化测试之requests库详解
    QQ发送邮件实例
    获取当前目录下最新的文件
    The Zen of Python
  • 原文地址:https://www.cnblogs.com/taoshihan/p/14420202.html
Copyright © 2011-2022 走看看