一:移动端软键盘监听(弹出,收起)
1)监听onresize/resize(Android)
//方法一:
var winHeight = $(window).height();//获取页面的高度
$(window).resize(function(){
var resizeHeight = $(this).height();
if(winHeight-resizeHeight>140){
//键盘弹出
}else{
//键盘收起
}
})
//方法二:
var orignHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.onresize = function(){
var resizeHeight = this.documentElement.clientHeight || this.body.clientHeight;
if(orignHeight - resizeHeight>140){
//键盘弹出
}else{
//键盘收起
}
}
注:140是一个预估的阀值,用来排除其他的resize操作。仅resize的高度差大于140,才被识别为软键盘交互,否则不是。如果浏览器的工具栏,搜索栏的隐藏,window的窗口页会有一个较小的变化。
2)监听input失焦blur(IOS)
因为ios的第三方键盘可能并不会导致window.resize,所以不能使用window.resize监听,但可以通过输入框是否获取焦点 判断;(在Android中,点击键盘上的收起按钮,键盘虽然收起了,但是输入框仍然处于焦点状态,并没有触发focusout事件)
focusout和focusin支持冒泡,对应blur和focus,使用focusout、focusin是因为可以冒泡,blur、focus不会冒泡,这样就可以使用事件代理,处理多个输入框存在的情况(视情况而定)。
$(document).on('focusout',function(){
//键盘收起事件处理
})
$(document).on('focusin',function(){
//键盘弹出事件处理
})
二:布局问题(针对定位)
1)输入框input获取焦点时,虚拟键盘会把fixed元素顶上去(主要在部分安卓上)
$('input').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.setTime(function(){
window.scrollTo(0,document.body.clientHeight);
},500)
}