• [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

    赞赏作者

    微信交流

  • 相关阅读:
    测试阅读量
    JS中的 length, var i = [1,2]; i[length], 与 i.length, i["length"]的区别
    微信小程序:button组件的边框
    mongo学习笔记
    C言语语法总结(随时更新)
    Vim 常用命令总结
    php 文件操作
    git常用命令
    递归方式转迭代方式
    ECMAScript6 ES6 ES2015新语法总结
  • 原文地址:https://www.cnblogs.com/taoshihan/p/14420202.html
Copyright © 2020-2023  润新知