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

4次阅读

共计 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 />
```

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

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

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

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

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

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

信息在计算机上是用二进制示意的，这种表示法让人了解就很艰难。因而计算机上都配有输出和输出设备，这些设施的次要目标就是，以一种人类可浏览的模式将信息在这些设施上显示进去供人浏览了解。为保障人类和设施，设施和计算机之间能进行正确的信息替换，人们编制的对立的信息替换代码，这就是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

关于前端:html

关于前端:JavaScript-在-Promisethen-方法里返回新的-Promise

关于前端:大家都能看得懂的源码-如何封装-cookielocalStoragesessionStorage-hook

关于前端:使用CDN加速后网站的访问过程

关于linux:Ubuntu用户都应该了解的快捷键

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

键盘事件

键盘键分类

键盘事件的取值

事件取值兼容状况

常见的限度类型

keyCode 对应表

ASCII 码表

参考链接

站内搜索

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

键盘事件

键盘键分类

键盘事件的取值

事件取值兼容状况

常见的限度类型

keyCode 对应表

ASCII 码表

参考链接

字符	编码	字符	编码	字符	编码	字符	编码
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

字符	编码	字符	编码	字符	编码	字符	编码
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

字符	编码	字符	编码	字符	编码	字符	编码
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

字符	编码	字符	编码	字符	编码	字符	编码
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

字符	编码	字符	编码	字符	编码	字符	编码
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

字符	编码	字符	编码	字符	编码	字符	编码
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