zoukankan      html  css  js  c++  java
  • 移动端软件盘遮挡输入框问题

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

      软键盘弹出会改变浏览器可视区域的高度,安卓会触发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);

          }

        

    参考网址:

    深入理解滚动scroll:https://www.cnblogs.com/xiaohuochai/p/5831640.html

  • 相关阅读:
    java2: HttpClient,实现登录,请求等操作,session保持
    bat使用1
    java4: 读取配置文件
    HTML+CSS学习笔记(一)
    第1章:JavaScript简介
    第2章:在HTML中使用JavaScript
    HTML+CSS学习笔记(二)
    ASP.NET防止页面刷新的方法
    上下左右无空隙不间断图片连续滚动代码
    SQL Server2005新加的功能排名函数
  • 原文地址:https://www.cnblogs.com/fqlGlog/p/7878610.html
Copyright © 2011-2022 走看看