如何在JavaScript中使用鍵盤事件-創(chuàng)新互聯(lián)

如何在JavaScript中使用鍵盤事件？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供姚安企業(yè)網站建設,專注與成都網站制作、成都做網站、H5響應式網站、小程序制作等業(yè)務。10年已為姚安眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網絡公司優(yōu)惠進行中。

javascript是一種什么語言

javascript是一種動態(tài)類型、弱類型的語言，基于對象和事件驅動并具有相對安全性并廣泛用于客戶端網頁開發(fā)的腳本語言，同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言。它主要用來給HTML網頁添加動態(tài)功能，現(xiàn)在JavaScript也可被用于網絡服務器，如Node.js。

JavaScript 鍵盤事件有以下3種

keydown
鍵盤按鍵按下（如果按著不放，會持續(xù)觸發(fā)該事件），可以捕獲組合鍵。

keypress
鍵盤非功能按鍵按下（在keydown之后觸發(fā)，如果按著不放會持續(xù)觸發(fā)該事件），只能捕獲單個鍵。

keyup
鍵盤按鍵彈起，可以捕獲組合鍵。

全局事件對象event

event.ctrlKey
功能鍵”ctrl”鍵是否按下。

event.altKey
功能鍵”alt”鍵是否按下。

event.shiftKey
功能鍵”shift”鍵是否按下。

event.keyCode
鍵盤按鍵鍵碼。

event.charCode
鍵盤非功能按鍵的ASCII值，可以用其區(qū)分大小寫。

String.fromCharCode(event.charCode)
將ASCII值轉化為對應的字符形式。

注意點

KeyDown觸發(fā)后，不一定觸發(fā)KeyUp。比如此時單擊鼠標右鍵。
其中PrScrn 按鍵KeyPress、KeyDown和KeyUp 都不能捕獲。
KeyPress主要用來捕獲數(shù)字（包括Shift+數(shù)字的符號）、字母（注意：包括大小寫）、小鍵盤等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜單鍵}、{開始鍵}和方向鍵外的ANSI字符。
KeyDown 和 KeyUp 的keyCode區(qū)分小鍵盤和主鍵盤的數(shù)字字符。KeyPress 則不區(qū)分小鍵盤和主鍵盤的數(shù)字字符。

keyCode	key
8	BackSpace BackSpace
9	Tab Tab
12	Clear
13	Enter
16	Shift_L
17	Control_L
18	Alt_L
19	Pause
20	Caps_Lock
27	Escape Escape
32	space space
33	Prior
34	Next
35	End
36	Home
37	Left
38	Up
39	Right
40	Down
41	Select
42	Print
43	Execute
45	Insert
46	Delete
47	Help
48	0 equal braceright
49	1 exclam onesuperior
50	2 quotedbl twosuperior
51	3 section threesuperior
52	4 dollar
53	5 percent
54	6 ampersand
55	7 slash braceleft
56	8 parenleft bracketleft
57	9 parenright bracketright
65	a A
66	b B
67	c C
68	d D
69	e E EuroSign
70	f F
71	g G
72	h H
73	i I
74	j J
75	k K
76	l L
77	m M mu
78	n N
79	o O
80	p P
81	q Q at
82	r R
83	s S
84	t T
85	u U
86	v V
87	w W
88	x X
89	y Y
90	z Z
96	KP_0 KP_0
97	KP_1 KP_1
98	KP_2 KP_2
99	KP_3 KP_3
100	KP_4 KP_4
101	KP_5 KP_5
102	KP_6 KP_6
103	KP_7 KP_7
104	KP_8 KP_8
105	KP_9 KP_9
106	KP_Multiply KP_Multiply
107	KP_Add KP_Add
108	KP_Separator KP_Separator
109	KP_Subtract KP_Subtract
110	KP_Decimal KP_Decimal
111	KP_Divide KP_Divide
112	F1
113	F2
114	F3
115	F4
116	F5
117	F6
118	F7
119	F8
120	F9
121	F10
122	F11
123	F12
124	F13
125	F14
126	F15
127	F16
128	F17
129	F18
130	F19
131	F20
132	F21
133	F22
134	F23
135	F24
136	Num_Lock
137	Scroll_Lock
187	acute grave
188	comma semicolon
189	minus underscore
190	period colon
192	numbersign apostrophe
210	plusminus hyphen macron
211
212	copyright registered
213	guillemotleft guillemotright
214	masculine ordfeminine
215	ae AE
216	cent yen
217	questiondown exclamdown
218	onequarter onehalf threequarters
220	less greater bar
221	plus asterisk asciitilde
227	multiply division
228	acircumflex Acircumflex
229	ecircumflex Ecircumflex
230	icircumflex Icircumflex
231	ocircumflex Ocircumflex
232	ucircumflex Ucircumflex
233	ntilde Ntilde
234	yacute Yacute
235	oslash Ooblique
236	aring Aring
237	ccedilla Ccedilla
238	thorn THORN
239	eth ETH
240	diaeresis cedilla currency
241	agrave Agrave atilde Atilde
242	egrave Egrave
243	igrave Igrave
244	ograve Ograve otilde Otilde
245	ugrave Ugrave
246	adiaeresis Adiaeresis
247	ediaeresis Ediaeresis
248	idiaeresis Idiaeresis
249	odiaeresis Odiaeresis
250	udiaeresis Udiaeresis
251	ssharp question backslash
252	asciicircum degree
253	3 sterling
254	Mode_switch

測試范例

<html>
  <body>
    <script type="text/javascript">
      function appendText(str) {
        document.body.innerHTML += (str+"<br/>");
      }
      document.onkeydown = function(){
        //如果長按的話，會持續(xù)觸發(fā)keydown和keypress(如果有該事件的話)
        appendText("onkeydown");
        if(event.ctrlKey) {
          appendText("ctrlKey");
        }
        if(event.altKey) {
          appendText("altKey");
        }
        if(event.shiftKey) {
          appendText("shiftKey");
        }
        //無charCode屬性，只有keypress才有該屬性
        if(event.charCode) {
          appendText(String.fromCharCode(event.charCode));
        }
        if(event.keyCode) {
          appendText(event.keyCode);
        }
        //該語句只對chrome和edge有效，可以屏蔽keypress(只對chrome和edge瀏覽器有效)
        //event.returnValue = false;
      };
      document.onkeypress = function() {
        //keypress無法監(jiān)聽到組合鍵
        appendText("onkeypress");
        if(event.ctrlKey) {
          appendText("ctrlKey");
        }
        if(event.altKey) {
          appendText("altKey");
        }
        if(event.shiftKey) {
          appendText("shiftKey");
        }
        //charCode是字母的Unicode值
        if(event.charCode) {
          appendText(String.fromCharCode(event.charCode));
        }
      }
      document.onkeyup = function() {
        appendText("onkeyup");
      }
    </script>
  </body>
</html>

這里使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，運行效果如下圖所示：

如何在JavaScript中使用鍵盤事件

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯(lián)成都網站設計公司行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)成都網站設計公司的支持。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、網站設計器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前題目：如何在JavaScript中使用鍵盤事件-創(chuàng)新互聯(lián)
瀏覽地址：http://www.rwnh.cn/article24/doejje.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、網站改版、面包屑導航、響應式網站、網站設計公司、全網營銷推廣

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

如何在JavaScript中使用鍵盤事件-創(chuàng)新互聯(lián)

javascript是一種什么語言