关于前端:限制input输入的方法监听键盘事件

问题：input元素只容许输出数字、中文、字母等。

实现思路：Js监听键盘事件，通过正则匹配或键码值比照，将不合乎校验的值替换或者将事件对象的returnValue置为false。

键盘事件

三个键盘事件：keydown、keypress、keyup

事件触发程序：keydown -> keypress -> keyup

• keydown：当用户按下任意键时触发，而且按住不放的话，会反复触发此事件。
• keypress：当用户按下字符键时触发，而且按住不放的话，会反复触发此事件。但功能键不肯定能触发这个事件。
• keyup：当用户开释键时触发。

键盘事件的触发过程具体是这样的：在用户按下键盘上的一个字符键时， 首先会触发keydown事件，而后是keypress事件，最初是keyup事件。其中，keydown、keypress事件是在文本框发生变化之前 被触发；而keyup在文本框发生变化之后被触发。如果用户按下一个键不放，就会反复触发keydown、keypress事件。在用户按下一个功能键时，首先触发keydown事件，而后就是keyup事件。如果用户按下一个键不放，就会反复触发keydown。

在keyup 事件中无奈阻止浏览器默认事件，因为在keypress时，浏览器默认行为曾经实现，即，将文字输出文本框（只管这时还没显示），这个时候不论是preventDefault还是return Value = false，都不能阻止在文本框中输出文字的行为，如要阻止默认行为，必须在keydown或keypress时阻止。

键盘键分类

键盘中的键分为字符键（可打印）和功能键（不可打印），零碎功能键包含如下：Esc、Tab、Caps Lock、Shift、Ctrl、Alt、Enter、Backspace、Print Screen、Scroll Lock、Pause Break、Insert、Delete、Home、End、Page Up、Page Down， F1 ~ 12，Num Lock、The Arrow Keys。

keydown和keyup均能够对系统功能键进行无效的拦挡，但事件截获的地位不同；keypress事件不能对系统功能键（例如：后退、删除等）、中文输入法进行失常的响应，

keypress响应零碎功能键总结：

Firefox：反对 Esc、Enter、Backspace、Pause Break、Insert、Delete、Home、End、Page Up、Page Down、F1 ~ F12、The Arrow Keys、反对 The Arrow Keys

Chrome、Oprea、Safari：反对Enter、不反对 The Arrow Keys

IE：反对Esc、Enter、不反对 The Arrow Keys

中文输入法（浏览器之间体现得不太统一）：

firfox：输出触发keydown，回车确认输出触发keyup

chrome：输出触发keydown、keyup，回车确认输出只触发keydown

IE：输出触发keydown、keyup，回车确认输出触发keydown，keyup

Safari：输出触发keydown、keyup，回车确认输出触发keydown，keyup

opera：输出触发keydown、keyup，回车确认输出触发keydown，keyup

键盘事件的取值

• keyCode(键码)：就是字母或数字对应的ASCII码。在产生keydown、keypress、keyup事件时，可在event对象中获取。

  • 在FF、Opera中，按分号键时keyCode值为59，但IE、Chrome、Safari则返回186
  • 在Safari3之前的版本中，上、下、左、右箭头和上翻(PageUp)、下翻(PageDown)键返回大于63000的值

• which：

• charCode(字符编码)：就是按下的字符键对应的ASCII编码。

  keypress事件中，FF、Chrome、Safari的event对象都反对一个charCode属性，这个属性在按下非字符键或产生keydown和keyup事件时值为0；

  IE、Opera则是在keyCode中 保留字符键的ASCII编码。

  所以，要想跨浏览器取得字符编码，代码如下：

  //获取字符编码，能够应用String.fromCharCode()将其转换为理论的字符。var getCharCode = function(event){    var charcode = event.charCode;    if(typeof charcode === "number" && charcode != 0){        return charcode;    }else{        //在中文输入法下 keyCode === 229 || keyCode === 197(Opera)        return event.keyCode;    }};

事件取值兼容状况

• keydown、keyup体现统一，keypress与两者有差别
• keydown、keyup事件中，字符键、功能键可获取keyCode、witch值，但charCode=0
• keypress事件中，字符键可获取keyCode、witch、charCode值。有此浏览器中，功能键不肯定能触发此事件
• keypress事件的keyCode对字母的大小写敏感，而keydown、keyup事件不敏感
• keypress事件的which值无奈辨别主键盘上的数字键和附键盘数字键的，而keydown、keyup的which值对主附键盘的数字键敏感。
• IE(ie9以下，ie 11失常)，keydown、keyup 事件中只有一个属性keyCode属性，keycode属性示意你具体按下的键(也称为virtual keycode)；keypress事件中，keyCode属性指的是你键入的字符(character code)

常见的限度类型

• 只能输出或粘贴数字

  <!--this.能够不加--><input onkeyup="this.value = this.value.replace(/\D/g,'')" onafterpaste="this.value = this.value.replace(/\D/g,'')">

• 只能输出数字(无闪动)

  <input type="text" onkeypress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false" /> 

• 只能输出或粘贴数字和小数点

  <input onkeyup="if(isNaN(value)) execCommand('undo')" onafterpaste="if(isNaN(value)) execCommand('undo')">

• 只能输出或粘贴英文字母和数字，不能输出中文

  <input onkeyup="this.value = this.value.replace(/[^\w\.\/]/g,'')" onafterpaste="this.value = this.value.replace(/[^\w\.\/]/g,'')">

• 只能输出或粘贴中文

  <input type="text" onkeyup="this.value = this.value.replace(/[^\u4e00-\u9fa5]/g,'')" onafterpaste="this.value = this.value.replace(/[^\u4e00-\u9fa5]/g,'')">  

• 只能输出或粘贴英文

  <input type="text" onkeyup="this.value = this.value.replace(/[^a-zA-Z]/g,'')" onafterpaste="this.value = this.value.replace(/[^a-zA-Z]/g,'')"> 

• 繁难禁止输出汉字

  <!--有效？？--><input style="ime-mode:disabled">

• 只读文本框

  <input readonly />

keyCode对应表

字母（大、小写）：[A-Z] -> [65-90]

数字：[0-9] -> [48-57]

小键盘按键：[0-9] -> [96-105]

F功能键：[F1-F12] -> [112-123]

keyCod曾经从 Web 规范中删除，尽管一些浏览器目前依然反对它，但兴许会在将来的某个工夫进行反对，请尽量不要应用该个性。

你应该应用KeyboardEvent.code。 可怜的是，有一些浏览器还是没有实现它，所以你在应用之前必须要小心，确认你所应用的那个被所有指标浏览器所反对。

ASCII码表

信息在计算机上是用二进制示意的，这种表示法让人了解就很艰难。因而计算机上都配有输出和输出设备，这些设施的次要目标就是，以一种人类可浏览的模式将信息在这些设施上显示进去供人浏览了解。为保障人类和设施，设施和计算机之间能进行正确的信息替换，人们编制的对立的信息替换代码，这就是ASCII码（American Standard Code for Information Interchange）表，它的全称是“美国信息替换规范代码”。

参考链接

MDN KeyboardEvent.keyCode

键盘事件keydown、keypress、keyup随笔整顿总结（摘抄）