zoukankan      html  css  js  c++  java
  • :input获得焦点时被弹出键盘挡住解决办法

    这个是移动端非常常见的bug了,这里说下综合的解决办法,因为有时候你的办法就是会失效。。

    上代码

    /*input框调起输入法盖住输入问题*/
    $('input[type="text"]').on('click', function () {
      var target = this;
      var t = navigator.userAgent;
      if (t.indexOf("Android") > -1 || t.indexOf("Adr") > -1) {
        var e = $(this).offset().top - 30;
        $(window).scrollTop(e);
      };
      setTimeout(function(){
        target.scrollIntoViewIfNeeded();
      },400);
    });

    注意点1:使用scrollTop时。要注意首页页面要设置高度 height:100% ,其次页面的overflow:hidden,display:none;也会影响

    注意点2:scrollIntoView(alignWithTop): 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。

    alignWithTop 若为 true,或者什么都不传,那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐;
    alignWithTop 若为 false,调用元素会尽可能全部出现在视口中,可能的话,调用元素的底部会与视口顶部平齐,不过顶部不一定平齐。
    支持的浏览器:IE、Chrome、Firefox、Safari和Opera。
    该方法是唯一一个所有浏览器都支持的方法,类似还有如下方法,但是只有在Chrome和Safari有效:
    scrollIntoViewIfNeeded(alignCenter)
    scrollByLines(LineCount)
    注意点3 如果是在弹层里出现此问题,那么则直接改变定位高度即可。
    希望能帮助到大家。
  • 相关阅读:
    洛谷 1012 拼数(NOIp1998提高组)
    洛谷 1540 机器翻译
    洛谷 1328 生活大爆炸版石头剪刀布(NOIp2014提高组)
    洛谷 2820 局域网
    洛谷 1359 租用游艇
    洛谷 1195 口袋的天空
    洛谷 1316 丢瓶盖
    洛谷 1258 小车问题
    洛谷 1017 进制转换 (NOIp2000提高组T1)
    GYM
  • 原文地址:https://www.cnblogs.com/xuniannian/p/9719666.html
Copyright © 2011-2022 走看看