博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端软件盘遮挡输入框问题
阅读量:4927 次
发布时间:2019-06-11

本文共 854 字,大约阅读时间需要 2 分钟。

第一、首先解决软键盘影响布局的问题:

  软键盘弹出会改变浏览器可视区域的高度,安卓会触发window.resize事件,ios不会触发,所以如果页面元素的布局是以窗口大小为基准的话,会出现布局混乱;比如body的height:100%等等,

  所以需要在页面初始化完成后执行这段代码(固定body的高度,不让他自适应)

  $(document).ready(function () {

    $(
'body'
).height($(
'body'
)[0].clientHeight);
  });
第二、区分输入框被遮挡的类型
  输入框的高度目测最高是页面可视区域的一半,即1/2手机屏幕宽度,所以如果所有输入框都在页面上半部分,就不存在软键盘遮挡输入框的问题
  (1)、输入框在页面的底部且第一个输入框在页面下半部分
    输入框组用绝对定位定位到页面底部。当软键盘弹出时也就自动把所有的输入框弹上去
  (2)、输入框组的总高度大于1/2页面高度
    给每个输入框做focuse监听事件或者直接监听window.resize事件(如果使用的是第三方输入法的话,需要把下面的代码放到时间函数内部)
      document.activeElement.
scrollIntoView(false);
      
document.activeElement.scrollIntoViewIfNeeded();
      
或者
      function scrollT(){

        $("html,body").animate({scrollTop: $(".fI_now").offset().top}, 300);

      }

    

参考网址:

:https://www.cnblogs.com/xiaohuochai/p/5831640.html

转载于:https://www.cnblogs.com/fqlGlog/p/7878610.html

你可能感兴趣的文章
go 切片
查看>>
注册维))基))百))科))
查看>>
eclipse 中手动安装 subversive SVN
查看>>
react常用语法
查看>>
【json的使用】
查看>>
ural 1519 Formula 1(插头dp)
查看>>
序列化和反序列化
查看>>
Web服务器Nginx多方位优化策略
查看>>
作业六:三层神经网络调参
查看>>
Java中的hashcode方法
查看>>
OpenCV学习 7:图像形态学:腐蚀、膨胀
查看>>
软件需求与分析课堂讨论一
查看>>
js添加var和不加var区别
查看>>
时钟程序
查看>>
无法识别的配置节log4net的(Unrecognized configuration section log4net)
查看>>
个人项目-小学四则运算 “软件”之初版
查看>>
cocos2d-html5学习笔记——创建持续性动作
查看>>
软件工程心得体会
查看>>
typedef typedef struct的使用
查看>>
Log4Net各参数API
查看>>