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

 
//这里区分不同系统,可以参考之前的文档记录 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却没有这个问题,后面会介绍处理的方式。



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

时间: 2024-10-27 19:30:24

js 监听手机端键盘弹出和收起事件的相关文章

c# 获取移动硬盘信息、监听移动设备的弹出与插入事件

原文:c# 获取移动硬盘信息.监听移动设备的弹出与插入事件 备忘一下改功能,主要通过WMI来实现,对于监听外接设备的弹出和插入事件一开始使用IntPtr WndProc事件,但是当监听到改事件时,同过WMI来获取设备,有时候还不能获取到,因此还是使用WqlEventQuery 来监听WMI的变化.下列是主要代码片段 1. 获取硬盘的固件序列号,盘序列号(由系统指派的唯一ID),总容量,剩余容量, 盘符,盘名称等信息 private static List<DriverBase> GetDriv

移动端监控软键盘弹出、收起事件

1.原理: 根据可视化窗口的改变来判断 var winHeight = $(window).height(); //获取当前页面高度 $(window).resize(function () { var thisHeight = $(this).height(); if ( winHeight - thisHeight > 50 ) { //键盘弹出 } else { //键盘收起 } })

Android 如何监听返回键,弹出一个退出对话框

Android 如何监听返回键,弹出一个退出对话框 分类: 初级android2012-10-21 00:46 48472人阅读 评论(9) 收藏 举报 androiddialogbuttonclass Android 如何监听返回键点击事件,并创建一个退出对话框, 防止自己写的应用程序不小心点击退出键而直接退出.自己记录下这个简单的demo,备用. 注:如下代码当时是从网上copy过来的,现在忘了它出自哪个原作者了,在此说声抱歉. 源码如下: [html] view plaincopy <EM

js监听input等表单输入框的变化事件oninput

js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变化的,复制粘贴也不能监听到,于是就用到了oninput事件来监听文本框value值的改变.由于是手机端页面没有考虑IE 这货.过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现,但是这存在着一些不好的用户体验.比如onchange事件只在键盘或者鼠标操作改变

js手机端图片弹出方法

1 $("img").click(function(){ //获取窗口可视大小 2 var width=$(window).width(); 3 var height=$(window).height(); 4 var img=$(this); 5 var html=''; //获取图片的真实宽高 6 $("<img/>").attr("src", $(img).attr("src")).load(function

Android NDK开发(八)——应用监听自身卸载,弹出用户反馈调查

转载请注明出处:http://blog.csdn.net/allen315410/article/details/42521251 监听卸载情景和原理分析 1,情景分析 在上上篇博客中我写了一下NDK开发实践项目,使用开源的LAME库转码MP3,作为前面几篇基础博客的加深理解使用的,但是这样的项目用处不大,除了练练NDK功底.这篇博客,我将讲述一下一个各大应用中很常见的一个功能,同样也是基于JNI开发的Android应用小Demo,看完这个之后,不仅可以加深对NDK开发的理解,而且该Demo也可

[转]Android 如何监听返回键,弹出一个退出对话框

本文转自:http://blog.csdn.net/sunnyfans/article/details/8094349 Android 如何监听返回键点击事件,并创建一个退出对话框, 防止自己写的应用程序不小心点击退出键而直接退出.自己记录下这个简单的demo,备用. 注:如下代码当时是从网上copy过来的,现在忘了它出自哪个原作者了,在此说声抱歉. 源码如下: [html] view plaincopyprint? public class BackKeyTest extends Activi

移动端判断键盘弹出和收起

根据键盘的展开和收起我们可以判断页面的可视区域的高度来操作,具体代码是这样的 const originHeight = document.documentElement.clientHeight || document.body.clientHeight; window.addEventListener('resize', () => { const resizeHeight = document.documentElement.clientHeight || document.body.cli

UITextField 点击事件 --- 不会触发键盘弹出,触发其他事件的实现。

今天在做项目的过程中,其中有三个控件: UITextField, UITextView , UILabel, 后来发现个问题:如果什么数据都不回填给textField.text 和 textView.text  传递的是:textField.text = textView.text =  .(其实就是个空的字符串),但是label 的却不是,log的是:label.text = (null).这样传的值总会导致程序Crash. 尝试了几种方法修改label.text ,但是最终都没有成功.最后的