码迷,mamicode.com
首页 > 移动开发 > 详细

移动端软键盘弹出影响页面布局(iOS软键盘取消后,页面没有恢复),移动端软键盘监听(弹出,收起),及影响定位布局的问题

时间:2020-01-13 13:15:42      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:syntax   mat   多个   页面布局   navig   aci   导致   bsp   不能   

一:移动端软键盘监听(弹出,收起)      

     1.监听resize ( Android)

            var winHeight = $(window).height(); //获取当前页面高度

$(window).resize(function () {
    var thisHeight = $(this).height();
    if ( winHeight - thisHeight > 140 ) {
     //键盘弹出
    } else {
    //键盘收起
    }
})

  140是一个预估值的阀值,用来排除其他的resize操作。仅resize的高度差大于140时,才被识别为软键盘交互,否则不是。如浏览器的工具栏、搜索栏的隐藏,window的窗口页会有一个较小的变化。

    2.监听input失焦blur(IOS)

  因为ios的第三方键盘可能并不会导致window resize,所以不能用resize监听,但是可以通过输入框是否获取焦点来判断; (在android中,点击键盘上的收起按钮,键盘虽然收起了,输入框仍然处于焦点状态,并没有触发focusout事件)

  focusin和focusout支持冒泡,对应focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡,focus和blur不会冒泡,这样就可以使用事件代理,处理多个输入框存在的情况。(这个视情况而定)

 

$(document).on(‘focusin‘, function () {
  //软键盘弹出的事件处理
});

$(document).on(‘focusout‘, function () {
  //软键盘收起的事件处理
});

 

  

二:布局问题 (针对定位)

       1.输入框input获取焦点时,虚拟键盘会把fixed元素顶上去(主要在部分安卓上)

1
2
3
4
5
6
7
$(‘#phone‘).bind(‘focus‘,function(){ 
            $(‘.bottom_fix‘).css(‘position‘,‘static‘); 
            //或者$(‘#viewport‘).height($(window).height()+‘px‘); 
        }).bind(‘blur‘,function(){ 
            $(‘.bottom_fix‘).css({‘position‘:‘fixed‘,‘bottom‘:‘0‘}); 
            //或者$(‘#viewport‘).height(‘auto‘); 
        });

 

  2.屏幕旋转时,出现上面问题

1
2
3
4
5
6
7
$(document).bind(‘orientationchange‘,function(){ 
            if(window.orientation==90 || window.orientation==-90){ 
                $(‘.bottom_fix‘).css(‘position‘,‘static‘); 
            }else
                $(‘.bottom_fix‘).css({‘position‘:‘fixed‘,‘bottom‘:‘0‘}); 
            
        });

  3.iOS下Html页面中input获取焦点被弹出键盘遮挡

 

1
2
3
4
5
6
7
var u = navigator.userAgent, app = navigator.appVersion; 
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
if (isiOS) { 
  window.setTimeout(function(){ 
    window.scrollTo(0,document.body.clientHeight); 
  }, 500); 
}

移动端软键盘弹出影响页面布局(iOS软键盘取消后,页面没有恢复),移动端软键盘监听(弹出,收起),及影响定位布局的问题

标签:syntax   mat   多个   页面布局   navig   aci   导致   bsp   不能   

原文地址:https://www.cnblogs.com/zjboke/p/12186518.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!