如何实时监听 input 和 textarea输入框值的变化

在实际前端开发中我们经常会遇到要实时监听用户的输入，根据不同的输入值来采取不同的措施。举一个常见的例子：我们在使用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 码对应表

（摘自博客笔记，原文网址：http://www.cnblogs.com/hutuzhu/p/4981877.html?utm_source=tuicool&utm_medium=referral,在原来的基础上有完善）

实时监听文本框值变化是非常常见的功能，通常最简单的办法就是用keyup,keydown来实现，但是这种方法有两个问题，一个是当直接复制粘贴的时候没法监听到事件，另外一个问题是在移动端，使用删除键删除输入时候也无法监听到！

解决办法：

1、使用onchange事件

onchange事件是文本框内容改变并失去焦点的时候才触发。

2、比较完美的解决办法：oninput和onproper

HTML 中:

<element      oninput=" myScript "/>

JavaScript 中:

object .oninput=function(){ myScript }

JavaScript 中, 使用 addEventListener() 方法:

object .addEventListener("input", myScript )

oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。 oninput 事件在主流浏览器的兼容情况如下：

oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况：

修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。

修改了 input:text 或者 textarea 元素的值，value 属性发生变化。

修改了 select 元素的选中项，selectedIndex 属性发生变化。

在监听到 onpropertychange 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称。

<input   type="text"   oninput="OnInput (event)"   onpropertychange="OnPropChanged (event)" value="Text field"/>

//Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9

function  OnInput (event) {

alert ("The new content: " +event.target.value)

}

//Internet Explorer

function     OnPropChanged (event){

if(event.propertyName.toLowerCase () == "value") {

alert ("The new content: " +event.srcElement.value)

}

}

$('textarea').bind('input propertychange',function() {

$('.msg').html($(this).val().length + ' characters')

})

$('textarea').on('input propertychange',function(e) {

if(e.type ==="input"|| e.orignalEvent.propertyName ==="value") {

$('.msg').html(this.value.length +' characters')

}

})

---