event.keyCode用法及keyCode对照表

宋韩

于 2020-07-02 09:59:36 发布

阅读量1k

点赞数

原文链接：https://blog.youkuaiyun.com/qq_39207948/article/details/79882229

版权

下面这个代码要呈现的是当TextBox1文本输入框按下enter键后,键盘焦点自动跳到TextBox2文本输入框.注意,当有button按钮时会影响原有效果展现.
前台代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestWebApplication3.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        function JumpByEnter() {
            if (event.keyCode == 13) {
                var tb2 = document.getElementById("TextBox2");
                tb2.focus();
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br>
        </div>
    </form>
</body>
</html>

后台代码:

using System;

namespace TestWebApplication3
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                this.TextBox1.Attributes.Add("onKeyDown", "JumpByEnter()");
            }
        }

    }
}

irfirefox2.0中不支持 window.event.keyCode,

但是我们可以用event.which代替。但是为了使其能更具有普遍的兼容性，最好用event.keyCode|| event.which.

Keycode对照表

字母和数字键的键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

数字键盘上的键的键码值(keyCode)				功能键键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
0	96	8	104	F1	112	F7	118
1	97	9	105	F2	113	F8	119
2	98	*	106	F3	114	F9	120
3	99	+	107	F4	115	F10	121
4	100	Enter	108	F5	116	F11	122
5	101	-	109	F6	117	F12	123
6	102	.	110
7	103	/	111

控制键键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
BackSpace	8	Esc	27	Right Arrow	39	-_	189
Tab	9	Spacebar	32	Dw Arrow	40	.>	190
Clear	12	Page Up	33	Insert	45	/?	191
Enter	13	Page Down	34	Delete	46	`~	192
Shift	16	End	35	Num Lock	144	[{	219
Control	17	Home	36	;:	186	\\|	220
Alt	18	Left Arrow	37	=+	187	]}	221
Cape Lock	20	Up Arrow	38	,<	188	'"	222

多媒体键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
音量加	175
音量减	174
停止	179
静音	173
浏览器	172
邮件	180
搜索	170
收藏	171

出处：http://www.cnblogs.com/hsapphire/archive/2009/12/16/1625642.html

当代码运行起来的时候会出现一些静态页面所没有的代码

1.form表单出现了method、action、以及两处 class="aspNetHidden" 2.TextBox1出现了在页面加载时添加的属性onKeyDown="JumpByEnter()



<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>

</title>
    <script type="text/javascript">
        function JumpByEnter() {
            if (event.keyCode == 13) {
                var tb2 = document.getElementById("TextBox2");
                tb2.focus();
            }
        }
    </script>
</head>
<body>
    <form method="post" action="./WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="2FLDRX0mxMggVVmOT3ZVB5gg5bQUcts6Ub81Nu6PPKN7569tzCUH3gpBWPNtorE5684dc3jREyKC88gUF0u4sTY2RD2EiUW37WZSanIHGn/qRnSnjzNtTWlHnZIx3LrC9ObA11mVkNZ2pTlnVAaY3w==" />
</div>

<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="B6E7D48B" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="1w3Nhcxnx1gezpdoOlP52V9A1tZHwJiLG8LsrcO6nRsCldX5Mx44gmUzMR7KqfmOY3+V0waVLcVSK9955YE+oVdZ8uRb+2Y+6ZLRCuEHNQtopOGm2PgE7jRe2e1YS/yfaMqTUxexYS6xzObFqmN84g==" />
</div>
        <div>
            <input name="TextBox1" type="text" id="TextBox1" onKeyDown="JumpByEnter()" /><br>
            <input name="TextBox2" type="text" id="TextBox2" /><br>
        </div>
    </form>
</body>
</html>