JavaScript Event Key Codes and Enable Tab Event in Text Area

Javascript events are used to capture user keystrokes.

Below is a table of key codes for the keys on a multimedia keyboard. If this table is inconsistent with your own findings, please let me know.

This knowledge came in handy when developing the Text Counter widget, demonstrated in the Javascript widgets section.

NEW: Want to double check on your local environment? Use the Online Key Code Test feature below.

Key Code Reference Table

0		10		20	Caps Lock	30		40	Arrow Down
1		11		21		31		41
2		12		22		32		42
3		13	Enter	23		33	Page Up	43
4		14		24		34	Page Down	44
5		15		25		35	End	45	Insert
6		16	Shift	26		36	Home	46	Delete
7		17	Ctrl	27	Esc	37	Arrow Left	47
8	Backspace	18	Alt	28		38	Arrow Up	48	0
9	Tab	19	Pause/Break	29		39	Arrow Right	49	1
50	2	60		70	f	80	p	90	z
51	3	61	=+	71	g	81	q	91	Windows
52	4	62		72	h	82	r	92
53	5	63		73	i	83	s	93	Right Click
54	6	64		74	j	84	t	94
55	7	65	a	75	k	85	u	95
56	8	66	b	76	l	86	v	96	0 (Num Lock)
57	9	67	c	77	m	87	w	97	1 (Num Lock)
58		68	d	78	n	88	x	98	2 (Num Lock)
59	;:	69	e	79	o	89	y	99	3 (Num Lock)
100	4 (Num Lock)	110	. (Num Lock)	120	F9	130		140
101	5 (Num Lock)	111	/ (Num Lock)	121	F10	131		141
102	6 (Num Lock)	112	F1	122	F11	132		142
103	7 (Num Lock)	113	F2	123	F12	133		143
104	8 (Num Lock)	114	F3	124		134		144	Num Lock
105	9 (Num Lock)	115	F4	125		135		145	Scroll Lock
106	* (Num Lock)	116	F5	126		136		146
107	+ (Num Lock)	117	F6	127		137		147
108		118	F7	128		138		148
109	- (Num Lock)	119	F8	129		139		149
150		160		170		180		190	.>
151		161		171		181		191	/?
152		162		172		182	My Computer	192	`~
153		163		173		183	My Calculator	193
154		164		174		184		194
155		165		175		185		195
156		166		176		186		196
157		167		177		187		197
158		168		178		188	,<	198
159		169		179		189		199
200		210		220	\|	230		240
201		211		221	]}	231		241
202		212		222	'"	232		242
203		213		223		233		243
204		214		224		234		244
205		215		225		235		245
206		216		226		236		246
207		217		227		227		227
208		218		228		238		248
209		219	[{	229		239		249

Javascript events: numeric textbox, tab key in a textarea

I've played around with JavaScript key press events quite a bit over the years.

The most comprehensive script I wrote around this subject, is a mask control which we use on our intranet for all kinds of things (Code which I unfortunately can't share with you, else I might get shot or something).

Just to get the ball on the roll (get the basics in place), lets imagine for a moment that we want to hinder users to type anything but numeric values into a textbox (obviously one would still need to have server side checks in place)

 
function numeric(e) 
{
        return ((e.keyCode == 8) || (e.keyCode > 47 && e.keyCode <58)); 
    }
 

All we need to do from here is attach the function to a textbox, which will prevent the user from entering anything but numeric values.

 
<input type="text" name="somename" onkeydown="return numeric(event)" />
     

Taking it a bit further, let's say we've got a textarea wherein we want to modify the way it behaves to the tab key - normally pressing the tab key would take us to the next control on the page.

We would however like the user to have a more natural experience and provide them with the ability to use the tab key within a textarea. (Something that would be quite nice in a web application like phpmyadmin)

Have a look at the following code (works in IE and Firefox)

 
function allowTab(sender, e) 
    {
        if (e.keyCode == 9)
            {
                if (e.srcElement)
                    {
                        sender.selection = document.selection.createRange();
                            sender.selection.text = "\t";
                    }
                else if (e.target)
                    {
                        var start = sender.value.substring(0, sender.selectionStart);
                            var end = sender.value.substring(sender.selectionEnd, sender.value.length);                                             
                            var newRange = sender.selectionEnd + 1;
                            var scrollPos = sender.scrollTop;
                            sender.value = String.concat(start, "\t", end);                                 
                            sender.setSelectionRange(newRange, newRange);
                            sender.scrollTop = scrollPos;
                    }
                return false;
            }
        else
        {
                    return true;
            }
}
 

We pass the current object and its event to the function, by attacthing it to the onkeydown event, like below.

 
<textarea name="somename" style="width:600px; height:600px" onkeydown="return allowTab(this, event)">
    </textarea>
     

Posted in: .Net,Sample Code,traning