微信内网页关闭拉起键盘后页面错位

问题是这样的~

微信中打开了一个页面,页面中有输入框,当点击输入框后会拉起系统键盘如图:
系统键盘
这个是没毛病的,但是当input失去焦点后,系统键盘会收起,这时候bug就来了。。。
收起键盘

然后,页面底部多出来了一大块空白区域。。。

那 就开始解决问题吧!


我的方法是,当input获取焦点后记录当前滚动条位置,失去焦点时,页面滚动条重新定位至刚才位置。

    var inputList = [$('.input-code'), $('.phone-input')];

    $.each(inputList, function() {
      this.focus(function() {
        $(this).attr('data-current-scroll', $(window).scrollTop());
      }).blur(function() {
        $(window).scrollTop($(this).attr('data-current-scroll'));
      });
    });

ok,完事收工~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章