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

47次阅读

共计 4227 个字符，预计需要花费 11 分钟才能阅读完成。

问题：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）表，它的全称是“美国信息替换规范代码”。

字符 编码 字符 编码 字符 编码 字符 编码
nul 0 sp 32 @ 64 ‘ 96
soh 1 ! 33 A 65 a 97
stx 2 “ 34 B 66 b 98
etx 3 # 35 C 67 c 99
eot 4 $ 36 D 68 d 100
enq 5 % 37 E 69 e 101
ack 6 & 38 F 70 f 102
bel 7 ` 39 G 71 g 103
bs 8 ( 40 H 72 h 104
ht 9 ) 41 I 73 i 105
nl 10 * 42 J 74 j 106
vt 11 + 43 K 75 k 107
ff 12 , 44 L 76 l 108
er 13 – 45 M 77 m 109
so 14 . 46 N 78 n 110
si 15 / 47 O 79 o 111
dle 16 0 48 P 80 p 112
dc1 17 1 49 Q 81 q 113
dc2 18 2 50 R 82 r 114
dc3 19 3 51 S 83 s 115
dc4 20 4 52 T 84 t 116
nak 21 5 53 U 85 u 117
syn 22 6 54 V 86 v 118
etb 23 7 55 W 87 w 119
can 24 8 56 X 88 x 120
em 25 9 57 Y 89 y 121
sub 26 : 58 Z 90 z 122
esc 27 ; 59 [ 91 { 123
fs 28 < 60 \ 92 \ 124
gs 29 = 61 ] 93 } 125
re 30 > 62 ^ 94 ~ 126
us 31 ? 63 _ 95 del 127

参考链接

MDN KeyboardEvent.keyCode

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

正文完
前端
发表至： 前端
2020-08-07
 0
关于前端:AbortSignal以前我没得选现在我想中止promise
关于前端:Promise
关于前端:数据可视化系列教程｜六大组件基础知识
关于前端:从01实践VuePress搭建组件库文档二

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

49次阅读

共计 4227 个字符，预计需要花费 11 分钟才能阅读完成。

问题：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）表，它的全称是“美国信息替换规范代码”。

字符 编码 字符 编码 字符 编码 字符 编码
nul 0 sp 32 @ 64 ‘ 96
soh 1 ! 33 A 65 a 97
stx 2 “ 34 B 66 b 98
etx 3 # 35 C 67 c 99
eot 4 $ 36 D 68 d 100
enq 5 % 37 E 69 e 101
ack 6 & 38 F 70 f 102
bel 7 ` 39 G 71 g 103
bs 8 ( 40 H 72 h 104
ht 9 ) 41 I 73 i 105
nl 10 * 42 J 74 j 106
vt 11 + 43 K 75 k 107
ff 12 , 44 L 76 l 108
er 13 – 45 M 77 m 109
so 14 . 46 N 78 n 110
si 15 / 47 O 79 o 111
dle 16 0 48 P 80 p 112
dc1 17 1 49 Q 81 q 113
dc2 18 2 50 R 82 r 114
dc3 19 3 51 S 83 s 115
dc4 20 4 52 T 84 t 116
nak 21 5 53 U 85 u 117
syn 22 6 54 V 86 v 118
etb 23 7 55 W 87 w 119
can 24 8 56 X 88 x 120
em 25 9 57 Y 89 y 121
sub 26 : 58 Z 90 z 122
esc 27 ; 59 [ 91 { 123
fs 28 < 60 \ 92 \ 124
gs 29 = 61 ] 93 } 125
re 30 > 62 ^ 94 ~ 126
us 31 ? 63 _ 95 del 127

参考链接

MDN KeyboardEvent.keyCode

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

正文完
前端
发表至： 前端
2020-08-07
 0
关于前端:AbortSignal以前我没得选现在我想中止promise
关于前端:Promise
关于前端:数据可视化系列教程｜六大组件基础知识
关于前端:从01实践VuePress搭建组件库文档二