H5如何对android和ios手机软键盘的监听

    总结：

    1.在ios中软键盘d起时，仅会引起body的scrollTop值改变，但是我们可以通过输入框的获取焦点情况来做判断，单也只能在ios中采用这个方案，因为在android中存在主动受气键盘后，但输入框并没有失去焦点，而ios中键盘受气后就会失去焦点；

2.在androis中软键盘d起或收起时，会改变window的高度，因此监听window的onresize事件；

一、Android

//获取原窗口的高度

var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight

window.onresize=function(){

    //键盘d起与隐藏都会引起窗口的高度发生变化

      var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight

        if(resizeHeight-0<originalHeight-0){

        //当软键盘d起，在此处 *** 作

        }else{

        //当软键盘收起，在此处 *** 作

        }

}

二、ios

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

document.body.addEventListener('focusin', () =>{

            //软键盘d出的事件处理

            if(isIphone()）{

            }

        })

  document.body.addEventListener('focusout', () =>{

      //软键盘收起的事件处理

        if(isIphone()）{

        }

  })

特此声明文章出处： https://blog.csdn.net/u012982629/article/details/81905894

在实际前端开发中我们经常会遇到要实时监听用户的输入，根据不同的输入值来采取不同的措施。举一个常见的例子：我们在使用Google 搜索框进行搜索时，每多输入一个字，搜索框下方显示的匹配结果会实时变化。这样的效果就是通过实时监听搜索框的输入值变化从而提取不同的匹配结果来实现的。

那么，一般使用最多的输入框就是 input 和 textarea 了。要想实时监听这两种输入框的值变化，就不得不提到键盘事件 key event 了。

键盘相关事件

onkeydown

onkeypress

onkeyup

oninput

onchange

onpropertychange

onkeydown/onkeypress/onkeyup

使用这三个事件监听输入框值变化，不能监听到右键的复制、粘贴、剪切的 *** 作。

onkeydown

按下键盘上的任意键（不包括PrScrn键）时触发；如果一直按着键不放，则会一直触发此事件。

onkeypress

按下键盘上的可显示字符键（可以参考此文的键盘按键分类一节）时触发，如果一直按着键不放，则会一直触发此事件。

onkeyup

释放键盘上的任意键（不包括PrScrn键）时触发

1、是否可以捕获组合键？

onkeydown/onkeyup可以捕获组合键，onkeypress 只能捕获单个字符。

在捕获组合键时建议使用 onkeyup 事件。

2、是否区分大小写字符？

onkeypress 能区分字符的大小写，onkeydown/onkeyup不能区分。

3、是否区分主键盘和小键盘的数字？

onkeypress不区分主键盘和小键盘的数字，onkeydown/onkeyup则可以区分。

4、触发顺序

先 onkeydown, 再 onkeypress, 最后onkeyup

参考文档

oninput/onpropertychange

上面讲到用 keydown/keypress/keyup无法监听右键粘贴复制 *** 作，于是就有了 oninput 事件。

oninput是 HTML5的新事件，可以在输入框（ textarea, input:text/password/search等）的value值发生变化时（通过 JS修改输入值除外）立即触发，所以可以监听右键粘贴复制 *** 作。但 IE9.0以下版本不支持，此时需要用到IE特有的 onpropertychange事件。在 Safari5.0以下版本，oninput 不支持 textarea 元素。

onpropertychange是 IE特有的事件，与 oninput不同的是，只要绑定对象的相关属性（不单 value 值）发生变化（包括 通过JS脚本来修改）都会触发此事件。

onchange

要触发这个事件有2个必备条件：

1、和onpropertychange一样，只要绑定对象的相关属性发生了变化就会触发此事件。但和onpropertychange不同，通过JS脚本改变属性时无法触发）；

2、输入框失去焦点后触发，所以无法做到实时监听；

键盘按键分类

键盘上的每一个按键都对应唯一的 ASCII码值，从这个角度理解其实每一个按键都是字符键。但这些按键可以分为2类： ASCII码控制字符键和 ASCII码可显示字符键。

ASCII码控制字符键

控制字符键是不会产生我们能看到的字符的按键，这类控制字符键常见的有：F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键。

常见控制字符键对应的 ASCII码见下：

ESC键 VK_ESCAPE (27)

回车键： VK_RETURN (13)

TAB键： VK_TAB (9)

Caps Lock键： VK_CAPITAL (20)

Shift键： VK_SHIFT ($10)

Ctrl键： VK_CONTROL (17)

Alt键： VK_MENU (18)

空格键： VK_SPACE (32)

退格键： VK_BACK (8)

左徽标键： VK_LWIN (91)

右徽标键： VK_LWIN (92)

鼠标右键快捷键：VK_APPS (93)

Insert键： VK_INSERT (45)

Home键： VK_HOME (36)

Page Up： VK_PRIOR (33)

PageDown： VK_NEXT (34)

End键： VK_END (35)

Delete键： VK_DELETE (46)

方向键(←)： VK_LEFT (37)

方向键(↑)： VK_UP (38)

方向键(→)： VK_RIGHT (39)

方向键(↓)： VK_DOWN (40)

F1键： VK_F1 (112)

F2键： VK_F2 (113)

F3键： VK_F3 (114)

F4键： VK_F4 (115)

F5键： VK_F5 (116)

F6键： VK_F6 (117)

F7键： VK_F7 (118)

F8键： VK_F8 (119)

F9键： VK_F9 (120)

F10键： VK_F10 (121)

F11键： VK_F11 (122)

F12键： VK_F12 (123)

ASCII码可显示字符键

可显示字符键是会产生我们能看到的字符的按键，这类按键常见得有：数字（包括 shift+数字）、字母（大小写）、小键盘。

常用可显示字符键ASCII码如下：

65 A 键

66 B 键

67 C 键

68 D 键

69 E 键

70 F 键

71 G 键

72 H 键

73 I 键

74 J 键

75 K 键

76 L 键

77 M 键

78 N 键

79 O 键

80 P 键

81 Q 键

82 R 键

83 S 键

84 T 键

85 U 键

86 V 键

87 W 键

88 X 键

89 Y 键

90 Z 键

键盘按键 ASCII 码对应表

---