700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vant 软键盘_移动端软键盘监听(弹出 收起) 及影响定位布局的问题

vant 软键盘_移动端软键盘监听(弹出 收起) 及影响定位布局的问题

时间:2022-01-02 13:19:09

相关推荐

vant 软键盘_移动端软键盘监听(弹出 收起) 及影响定位布局的问题

移动端软键盘监听(弹出,收起),及影响定位布局的问题

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

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元素顶上去(主要在部分安卓上)

$('#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.屏幕旋转时,出现上面问题

$(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获取焦点被弹出键盘遮挡

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);

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。