移动端软键盘监听(弹出,收起),及影响定位布局的问题
2017-09-13 12:27
621 查看
移动端软键盘监听(弹出,收起),及影响定位布局的问题
一:移动端软键盘监听(弹出,收起)
参考: 链接一 链接二
1.监听resize ( Android)
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不会冒泡,这样就可以使用事件代理,处理多个输入框存在的情况。(这个视情况而定)
二:布局问题 (针对定位)
参考: 链接一
1.输入框input获取焦点时,虚拟键盘会把fixed元素顶上去(主要在部分安卓上)
2.屏幕旋转时,出现上面问题
3.iOS下Html页面中input获取焦点被弹出键盘遮挡
一:移动端软键盘监听(弹出,收起)
参考: 链接一 链接二
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); }
相关文章推荐
- 移动端软键盘监听(弹出,收起),及影响定位布局的问题
- 移动端fixed和input获取焦点软键盘弹出影响定位的问题
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
- 关于html页面移动端软键盘弹出时影响页面布局的问题
- 通过监听最外层布局的改变判断键盘的状态,软键盘的弹出和收起都会改变外层布局
- js 移动端之监听软键盘弹出收起
- 移动端web开发之坑--自适应布局下的返回页面位置定位问题
- Android软键盘弹出不影响布局的方法
- 移动端软键盘收起监听
- Android软键盘弹出,RelativeLayout 布局会把原来的界面挤上去的问题,设置了隐藏键盘也没效果
- Android软键盘弹出时布局问题
- iOS 监听键盘的弹出,收起,并且拿到键盘的高度
- 利用媒体查询解决固定定位按钮被呼出键盘影响的问题
- Android软键盘弹出不影响布局的方法
- 移动端键盘键盘抬起问题布局出现问题
- Android学习问题:关于AlertDialog中自定义布局带有的EditText无法弹出键盘
- Android中软键盘弹出时关于布局的问题
- 移动端键盘弹出收起事件处理