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

    赞赏作者

    微信交流

  • 相关阅读:
    Delphi WinAPI SetLocaleInfo / GetLocaleInfo
    语言环境代码LCID对照表
    Delphi WinAPI SetThreadLocale
    光刻技术发展
    关于TVM的点滴记录
    TVM 各个模块总体架构
    TVM 图优化Graph Optimization
    Atomic Layer Deposition原子层沉积技术
    智加VS图森VS嬴彻
    汽车网络处理设计
  • 原文地址:https://www.cnblogs.com/taoshihan/p/14420202.html
Copyright © 2011-2022 走看看