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

js 监听手机端键盘弹出和收起事件

时间:2019-04-19 18:07:45      阅读:431      评论:0      收藏:0      [点我收藏+]

标签:user   参考   指定   .com   out   页面   navigator   提取   内容   

 
//这里区分不同系统,可以参考之前的文档记录 https://www.cnblogs.com/wind-wang/p/10737110.html

const ua = typeof window === ‘object‘ ? window.navigator.userAgent : ‘‘; let _isIOS = -1; let _isAndroid = -1; export function isIOS() { if (_isIOS === -1) { _isIOS = /iPhone|iPod|iPad/i.test(ua) ? 1 : 0; } return _isIOS === 1; } export function isAndroid() { if (_isAndroid === -1) { _isAndroid = /Android/i.test(ua) ? 1 : 0; } return _isAndroid === 1; }

 

1、在ios中软键盘弹起时,仅会引起$(‘body’).scrollTop值改变,但是我们可以通过输入框的获取焦点情况来做判断,但也只能在ios中采用这个方案,

因为在android中存在主动收起键盘后,但输入框并没有失焦,而ios中键盘收起后就会失焦;

2、在android中软键盘弹起或收起时,会改变window的高度,因此监听window的onresize事件;
 

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

if (isAndroid()) {
  const innerHeight = window.innerHeight;
  window.addEventListener(‘resize‘, () => {
    const newInnerHeight = window.innerHeight;
    if (innerHeight > newInnerHeight) {
      // 键盘弹出事件处理
      alert("android 键盘弹窗事件");
      
    } else {
      // 键盘收起事件处理
      alert("android 键盘收起事件处理")
    }
  });
} else if (isIOS()) {
  window.addEventListener(‘focusin‘, () => {
    // 键盘弹出事件处理
    alert("iphone 键盘弹出事件处理")
  });
  window.addEventListener(‘focusout‘, () => {
    // 键盘收起事件处理
    alert("iphone 键盘收起事件处理")
    
  });
}

//如果需要移除监听事件可以使用removeEventListener,但如果监听事件中使用的函数是匿名函数,可能移除事件没有任何效果,
可以将监听事件执行的函数,提取出来,使用函数名来指定
例如:
window.addEventListener(‘focusout‘, focusoutFunc);

function focusoutFunc (){
/*.....*/
}

window.removeEventListener(‘focusout‘, focusoutFunc); //移除事件


 

 处理完键盘弹出和收起事件后,会发现在ios中键盘收起时,页面内容留白不下滑,滑动下,又恢复正常。android却没有这个问题,后面会介绍处理的方式。



js 监听手机端键盘弹出和收起事件

标签:user   参考   指定   .com   out   页面   navigator   提取   内容   

原文地址:https://www.cnblogs.com/wind-wang/p/10711259.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!