背景需求：
1.自定義ctrl+c、ctrl+v、delete等操作；
2.允許在指定區域進行操作：框選、拖拽等；
准備工作：
1.了解鍵盤、鼠標事件以及監聽和銷毀；
2.了解鼠標事件坐標問題；
一、鼠標事件：
當鼠標單擊事件發生時，會觸發很多事件：mousedown、mouseup、click、dblclick。這些事件響應的順序如下：
mousedown → mouseup → click → mousedown → mouseup → click → dblclick
當鼠標在對象間移動時，首先觸發的事件是 mouseout，即在鼠標移出某個對象時發生。接着，在這兩個對象上都會觸發 mousemove 事件。最后，在鼠標進入對象上觸發 mouseover 事件。
| 事件類型 | 說明 |
|---|---|
| click | 單擊鼠標左鍵時發生，如果右鍵也按下則不會發生。當用戶的焦點在按鈕上並按了 Enter 鍵時，同樣會觸發這個事件 |
| dblclick | 雙擊鼠標左鍵時發生，如果右鍵也按下則不會發生 |
| mousedown | 鼠標按下時發生 |
| mouseout | 鼠標指針位於某個元素上且將要移出元素的邊界時發生 |
| mouseover | 鼠標指針移出某個元素到另一個元素上時發生 |
| mouseup | 松開任意一個鼠標按鈕時發生 |
| mousemove | 鼠標在某個元素上時持續發生 |
說明：mousedown 和 mouseup 事件類型多用在鼠標拖放、拉伸操作中，當這些事件處理函數的返回值為 false 時，會禁止綁定對象的默認行為。
1.注冊鼠標事件：
<p>鼠標事件</p> <input type="text" id="text" /> <script> var p1 = document.getElementsByTagName("p")[0]; //獲取段落文本的引用指針 var t = document.getElementById("text"); //獲取文本框的指針引用 function f () { //事件偵測函數 var event = event || window.event; //標准化事件對象 t.value = (event.type); //獲取當前事件類型 } p1.onmouseover = f; //經過 p1.onmouseout = f; //移開 p1.onmousedown = f; //按下 p1.onmouseup = f; //松開 p1.onmousemove = f; //移動 p1.onclick = f; //單擊時 p1.ondblclick = f; //雙擊 </script>
2.阻止頁面跳轉：
<a name="tag" id="tag" href="#">a</a> <script> var a = document.getElementsByTagName("a"); //獲取頁面中所有超鏈接元素 for (var i = 0; i < a.length; i ++) { //遍歷所有a元素 if ((new RegExp(window.location.href)).test(a[i].href)) { //如果當前超鏈接href屬性中包含本頁面的URL信息 a[i].onclick = function () { //則為超鏈接注冊鼠標單擊事件 return false; //將禁止超鏈接的默認行為 } } } </script>
3.拖動一個div:
動態計算拖動中元素的實時坐標位置，即 x 軸值為 ox+event.mx-mx，y 軸為 oy+event.my-my。
<div id="box" ></div> <script> // 初始化拖放對象 var box = document.getElementById("box"); // 獲取頁面中被拖放元素的引用指針 box.style.position = "absolute"; // 絕對定位 box.style.width = "160px"; // 定義寬度 box.style.height = "120px"; // 定義高度 box.style.backgroundColor = "red"; // 定義背景色 // 初始化變量，標准化事件對象 var mx, my, ox, oy; // 定義備用變量 function e(event){ // 定義事件對象標准化函數 if( ! event){ // 兼容IE瀏覽器 event = window.event; event.target = event.srcElement; event.layerX = event.offsetX; event.layerY = event.offsetY; } event.mx = event.pageX || event.clientX + document.body.scrollLeft; // 計算鼠標指針的x軸距離 event.my = event.pageY || event.clientY + document.body.scrollTop; // 計算鼠標指針的y軸距離 return event; // 返回標准化的事件對象 } // 定義鼠標事件處理函數 document.onmousedown = function(event){ // 按下鼠標時，初始化處理 event = e(event); // 獲取標准事件對象 o = event.target; // 獲取當前拖放的元素 ox = parseInt(o.offsetLeft); // 拖放元素的x軸坐標 oy = parseInt(o.offsetTop); // 拖放元素的y軸坐標 mx = event.mx; // 按下鼠標指針的x軸坐標 my = event.my; // 按下鼠標指針的y軸坐標 document.onmousemove = move; // 注冊鼠標移動事件處理函數 document.onmouseup = stop; // 注冊松開鼠標事件處理函數 } function move(event){ // 鼠標移動處理函數 event = e(event); o.style.left = ox + event.mx - mx + "px"; // 定義拖動元素的x軸距離 o.style.top = oy + event.my - my + "px"; // 定義拖動元素的y軸距離 } function stop(event){ // 松開鼠標處理函數 event = e(event); ox = parseInt(o.offsetLeft); // 記錄拖放元素的x軸坐標 oy = parseInt(o.offsetTop); // 記錄拖放元素的y軸坐標 mx = event.mx ; // 記錄鼠標指針的x軸坐標 my = event.my ; // 記錄鼠標指針的y軸坐標 o = document.onmousemove = document.onmouseup = null; // 釋放所有操作對象 } </script>
4.判斷鼠標是否在div區域內：
//找到該div左上角和右下角坐標， 判斷鼠標的坐標是否在這一區域就可以了。 var eventPositiont = function(event) { var div = document.getElementById("id"); var x = event.clientX; var y = event.clientY; var divx1 = div.offsetLeft; var divy1 = div.offsetTop; var divx2 = div.offsetLeft + div.offsetWidth; var divy2 = div.offsetTop + div.offsetHeight; if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {// //如果離開，則執行。。 } } function isOutDiv(event,divId){//判斷鼠標位置是否在某個div區域外 let div = document.getElementById(divId); let x=event.clientX; let y=event.clientY; let sl = div.getBoundingClientRect().left;//相對於左側實踐寬度：x不可小於 let st = div.getBoundingClientRect().top;// 相對於底部實踐高度：y不可小於 let sw = div.offsetWidth;// sl+sw:x不可大於 let sh = div.offsetHeight;// st+sh:y不可大於 return (x<sl || y<st || x>sl+sw || y>st+sh ) // 區域外面：通過鼠標x、y最大和最小值判斷 }
以下為一些常用屬性方便查找：
| 屬性 | 說明 | 兼容性 |
|---|---|---|
| clientX | 以瀏覽器窗口左上頂角為原點，定位 x 軸坐標 | 所有瀏覽器，不兼容 Safari |
| clientY | 以瀏覽器窗口左上頂角為原點，定位 y 軸坐標 | 所有瀏覽器，不兼容 Safari |
| offsetX | 以當前事件的目標對象左上頂角為原點，定位 x 軸坐標 | 所有瀏覽器，不兼容 Mozilla |
| offsetY | 以當前事件的目標對象左上頂角為原點，定位 y 軸坐標 | 所有瀏覽器，不兼容 Mozilla |
| pageX | 以 document 對象（即文檔窗口）左上頂角為原點，定位 x 軸坐標 | 所有瀏覽器，不兼容 IE |
| pageY | 以 document 對象（即文檔窗口）左上頂角為原點，定位 y 軸坐標 | 所有瀏覽器，不兼容 IE |
| screenX | 計算機屏幕左上頂角為原點，定位 x 軸坐標 | 所有瀏覽器 |
| screenY | 計算機屏幕左上頂角為原點，定位 y 軸坐標 | 所有瀏覽器 |
| layerX | 最近的絕對定位的父元素（如果沒有，則為 document 對象）左上頂角為元素，定位 x 軸坐標 | Mozilla 和 Safari |
| layerY | 最近的絕對定位的父元素（如果沒有，則為 document 對象）左上頂角為元素，定位 y 軸坐標 | Mozilla 和 Safari |
補充說明：
clientHeight 獲取對象的高度， 不計算任何邊距、 邊框、 滾動條， 但包括該對象的補白。
clientLeft 獲取 offsetLeft 屬性和客戶區域的實際左邊之間的距離。
clientTop 獲取 offsetTop 屬性和客戶區域的實際頂端之間的距離。
clientWidth 獲取對象的寬度， 不計算任何邊距、 邊框、 滾動條， 但包括該對象的補白。
offsetHeight 獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度。
offsetLeft 獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置。
offsetParent 獲取定義對象 offsetTop 和 offsetLeft 屬性的容器對象的引用。
offsetTop 獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置。
offsetWidth 獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的寬度。
offsetX 設置或獲取鼠標指針位置相對於觸發事件的對象的 x 坐標。
offsetY 設置或獲取鼠標指針位置相對於觸發事件的對象的 y 坐標。
screenX, screenY是相對於用戶顯示器的位置
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth(包括邊線的寬) 網頁可見區域高： document.body.offsetHeight(包括邊線的寬) 網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被卷去的高： document.body.scrollTop
網頁被卷去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
5.獲取框選區域的范圍：
const self = this;// 全局指代 let stateBar = document.getElementById('flow-chart-container');// 拖拽區域 stateBar.style.cursor = 'auto';// 修改鼠標圖標 stateBar.onmousedown = function (e) {// 1.鼠標按下 let posx = e.clientX; let posy = e.clientY; let div = document.createElement('div');// 創建一個拖拽區域div div.id = 'selectDiv'; div.className = 'tempDiv'; div.style.left = e.clientX + 'px'; div.style.top = e.clientY + 'px'; document.body.appendChild(div); document.onmousemove = function (ev) {// 2.鼠標經過的區域 div.style.left = Math.min(ev.clientX, posx) + 'px'; div.style.top = Math.min(ev.clientY, posy) + 'px'; div.style.width = Math.abs(posx - ev.clientX) + 'px'; div.style.height = Math.abs(posy - ev.clientY) + 'px'; document.onmouseup = function () {// 3.鼠標松開后繪制框選區域 let selDiv = document.getElementById('selectDiv'); let fileDivs = document.getElementsByClassName('node');// 獲取區域的所有節點 let l = selDiv.offsetLeft; // 框選位置x let t = selDiv.offsetTop; // 框選位置y let w = selDiv.offsetWidth; let h = selDiv.offsetHeight; for (let i = 0; i < fileDivs.length; i++) { //所有節點 let sl = fileDivs[i].getBoundingClientRect().left; let st = fileDivs[i].getBoundingClientRect().top; let sw = fileDivs[i].offsetWidth; let sh = fileDivs[i].offsetHeight; if (sl > l && st > t && sl + sw < l + w && st + sh < t + h) {// 只操作框選的節點內容 // 區域內節點
}
} //********************************** */ stateBar.style.cursor = 'grab';// 恢復鼠標圖標 div.parentNode.removeChild(div);// 拖拽結束移除div stateBar.onmousedown = null;// 銷毀鼠標操作 document.onmousemove = null; document.onmouseup = null; }; }; };
說明：樣式的修改，一般只需要增刪classname
.tempDiv { border: 1px dashed blue; background: #5a72f8; position: absolute; width: 0; height: 0; filter: "alpha(opacity:10)"; opacity: 0.1; }
二、鼠標按鍵：
通過事件對象的 button 屬性可以獲取當前鼠標按下的鍵，該屬性可用於 click、mousedown、mouseup 事件類型。不過不同模型的約定不同，具體說明如下表所示。
| 單擊 | IE 事件模型 | DOM 事件模型 |
|---|---|---|
| 左鍵 | 1 | 0 |
| 右鍵 | 2 | 2 |
| 中鍵 | 4 | 1 |
IE 事件模型支持位掩碼技術，它能夠偵測到同時按下的多個鍵。例如，同時按下左右鍵，則 button 屬性值為 1+2=3；同時按下中鍵和右鍵，則 button 屬性值為 2+4=6；同時按下左鍵和中鍵，則 button 屬性值為 1+4=5；同時按下 3 個鍵，則 button 屬性值為 1+2+4=7。
但是 DOM 模型不支持這種掩碼技術，如果同時按下多個鍵，就不能夠准確偵測。例如，按下右鍵（2）與同時按下左鍵和右鍵（0+2=2）的值是相同的。因此，對於 DOM 模型來說，這種 button 屬性約定值存在很大的缺陷。不過，在實際開發中很少需要同時檢測多個鼠標按鈕問題，一般僅需要探測鼠標左鍵或右鍵單擊行為。
document.onclick = function (e) { var e = e || window.event; //標准化事件對象 if (e.button == 2) { e.preventDefault(); return false; } }
三、鍵盤事件：
鍵盤事件主要包括下面 3 種類型：
- keydown：在鍵盤上按下某個鍵時觸發。如果按住某個鍵，會不斷觸發該事件，但是 Opera 瀏覽器不支持這種連續操作。該事件處理函數返回 false 時，會取消默認的動作（如輸入的鍵盤字符，在 IE 和 Safari 瀏覽器下還會禁止keypress 事件響應）。
- keypress：按下某個鍵盤鍵並釋放時觸發。如果按住某個鍵，會不斷觸發該事件。該事件處理函數返回 false 時，會取消默認的動作（如輸入的鍵盤字符）。
- keyup：釋放某個鍵盤鍵時觸發。該事件僅在松開鍵盤時觸發一次，不是一個持續的響應狀態。
<textarea id="key"></textarea> <script> var key = document.getElementById("key"); key.onkeydown =f; //注冊keydown事件處理函數 key.onkeyup = f; //注冊keyup事件處理函數 key.onkeypress = f; //注冊keypress事件處理函數 function f (e) { var e = e || window.event; //標准化事件處理 var s = e.type + " " + e.keyCode; //獲取鍵盤事件類型和按下的值 key.value = s; } </script>
| 屬性 | 說明 |
|---|---|
| keyCode | 該屬性包含鍵盤中對應鍵位的鍵值 |
| charCode | 該屬性包含鍵盤中對應鍵位的 Unicode 編碼，僅 DOM 支持 |
| target | 發生事件的節點（包含元素），僅 DOM 支持 |
| srcElement | 發生事件的元素，僅 IE 支持 |
| shiftKey | 是否按下 Shift 鍵，如果按下返回 true，否則為false |
| ctrlKey | 是否按下 Ctrl 鍵，如果按下返回 true，否則為false |
| altKey | 是否按下 Alt 鍵，如果按下返回 true，否則為false |
| metaKey | 是否按下 Mtea 鍵，如果按下返回 true，否則為false，僅 DOM 支持 |
說明：ctrlKey 和 shiftKey 屬性可存在於鍵盤和鼠標事件中，表示鍵盤上的 Ctrl 和 Shift 鍵是否被按住。
document.onclick = function (e) { var e = e || window.event; //標准化事件對象 var t = e.target || e.srcElement; //獲取發生事件的元素，兼容IE和DOM if (e.ctrlKey && e.shiftKey) { //如果同時按下Ctrl和Shift鍵 t.parentNode.removeChild(t); //移出當前元素 } }
keyCode 和 charCode 屬性使用比較復雜，但是它們在實際開發中又比較常用，故比較這兩個屬性在不同事件類型和不同瀏覽器中的表現時非常必要的：
| 屬性 | IE 事件模型 | DOM 事件模型 |
|---|---|---|
| keyCode（keypress） | 返回所有字符鍵的正確值，區分大寫狀態（65~90）和小寫狀態（97~122） | 功能鍵返回正確值，而 Shift、Ctrl、Alt、PrintScreen、ScrollLock 無返回值，其他所有鍵值都返回 0 |
| keyCode（keydown） | 返回所有鍵值（除 PrintScreen 鍵），字母鍵都以大寫狀態顯示鍵值（65~90） | 返回所有鍵值（除 PrintScreen 鍵），字母鍵都以大寫狀態顯示鍵值（65~90） |
| keyCode（keyup） | 返回所有鍵值（除 PrintScreen 鍵），字母鍵都以大寫狀態顯示鍵值（65~90） | 返回所有鍵值（除 PrintScreen 鍵），字母鍵都以大寫狀態顯示鍵值（65~90） |
| charCode（keypress） | 不支持該屬性 | 返回字符鍵，區分大寫狀態（65~90）和小寫狀態（97~122），Shift、Ctrl、Alt、PrintScreen、ScrollLock 無返回值，其他所有鍵值都返回 0 |
| charCode（keydown） | 不支持該屬性 | 所有鍵值為 0 |
| charCode（keyup） | 不支持該屬性 | 所有鍵值為 0 |
某些鍵的可用性不是很正確，如 PageUp 和 Home 鍵等。不過常用功能鍵和字符鍵都是比較穩定的，如下表所示。
| 鍵位 | 碼值 | 鍵位 | 碼值 |
|---|---|---|---|
| 0~9（數字鍵） | 48~57 | A~Z（字母鍵） | 65~90 |
| Backspace（退格鍵） | 8 | Tab（制表鍵） | 9 |
| Enter（回車鍵） | 13 | Space（空格鍵） | 32 |
| Left arrow（左箭頭鍵） | 37 | Top arrow（上箭頭鍵） | 38 |
| Right arrow（右箭頭鍵） | 39 | Down arrow（下箭頭鍵） | 40 |
1.如何使用方向鍵控制頁面元素的移動效果。
<div id="box"></div> <script> var box = document.getElementById("box"); // 獲取頁面元素的引用指針 box.style.position = "absolute"; // 色塊絕對定位 box.style.width = "20px"; // 色塊寬度 box.style.height = "20px"; // 色塊高度 box.style.backgroundColor = "red"; // 色塊背景 document.onkeydown = keyDown; //在Document對象中注冊keyDown事件處理函數 function keyDown(event){ // 方向鍵控制元素移動函數 var event = event || window.event; // 標准化事件對象 switch(event.keyCode){ // 獲取當前按下鍵盤鍵的編碼 case 37 : // 按下左箭頭鍵，向左移動5個像素 box.style.left = box.offsetLeft - 5 + "px"; break; case 39 : // 按下右箭頭鍵，向右移動5個像素 box.style.left = box.offsetLeft + 5 + "px"; break; case 38 : // 按下上箭頭鍵，向上移動5個像素 box.style.top = box.offsetTop - 5 + "px"; break; case 40 : // 按下下箭頭鍵，向下移動5個像素 box.style.top = box.offsetTop + 5 + "px"; break; } return false } </script>
說明：
a.對於字符鍵來說，鍵盤事件的響應順序：keydown → keypress → keyup。
b.對於非字符鍵（如功能鍵或特殊鍵）來說，鍵盤事件的相應順序：keydown → keyup。
2.獲取鍵盤事件相應順序：
<textarea id="text" cols="26" rows="16"></textarea> <script> var n = 1; // 定義編號變量 var text = document.getElementById("text"); // 獲取文本區域的引用指針 text.onkeydown = f; // 注冊keydown事件處理函數 text.onkeyup = f; // 注冊keyup事件處理函數 text.onkeypress = f; // 注冊keypress事件處理函數 function f(e){ // 事件調用函數 var e = e || window.event; // 標准化事件對象 text.value += (n++) + "=" + e.type +" (keyCode=" + e.keyCode + ")\n"; //捕獲事件響應信息 } </script>
3.鼠標移入某個區域后進行鍵盤監聽：
removeEventListener() {// 銷毀監聽事件 document.removeEventListener("keydown", this.handleKeydown); }, // 鍵盤事件 addEventListener() { document.addEventListener("keydown", this.handleKeydown); }, handleKeydown(e){ let self = this; // document.onkeydown = function (e) {// 注意：不要影響全局鍵盤事件 let evn = e || event; let key = evn.keyCode || evn.which || evn.charCode; //這是當你按下按鈕時獲取到的keycode if (evn.keyCode === 67 && evn.ctrlKey) { // ctrl + c const copyNode = self.copyNode; if (Array.isArray(copyNode) && copyNode.length > 0) { //do something } else { // do something } } else if (evn.keyCode === 86 && evn.ctrlKey) { // ctrl + v// do something } else if (key === 46) { // delete //do something } // } }, containerClick($event) { // console.log('點擊畫布空白'); this.addEventListener() }, mouseLeaveFlowChart(e){// 通常離開畫布銷毀 if(this.isInDiv(e,'flow-chart-container')){ this.removeEventListener() } }, isInDiv(event,divId){//判斷鼠標位置是否在某個div區域內 let div = document.getElementById(divId); let x=event.clientX; let y=event.clientY; let sl = div.getBoundingClientRect().left;//相對於左側實踐寬度：x不可小於 let st = div.getBoundingClientRect().top;// 相對於底部實踐高度：y不可小於 let sw = div.offsetWidth;// sl+sw:x不可大於 let sh = div.offsetHeight;// st+sh:y不可大於 return (x<sl || y<st || x>sl+sw || y>st+sh ) // 區域外 },
補充：
<button onclick="myClick()">鼠標單擊</button> <button ondblclick="myDBClick()">鼠標雙擊</button> <button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠標按下和抬起</button> <button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠標懸浮和離開</button> <button onmousemove="myMouseMove()">鼠標移動</button> <button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠標進入和離開</button>
// 按鍵按下+抬起<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">
鍵盤與鼠標按鍵的鍵值對照表
| 常數名稱 | 十六進制值 | 十進制值 | 對應按鍵 |
|---|---|---|---|
| VK_LBUTTON | 01 | 1 | 鼠標的左鍵 |
| VK_RBUTTON | 02 | 2 | 鼠標的右鍵 |
| VK-CANCEL | 03 | 3 | Ctrl+Break(通常不需要處理) |
| VK_MBUTTON | 04 | 4 | 鼠標的中鍵（三按鍵鼠標) |
| VK_BACK | 08 | 8 | Backspace鍵 |
| VK_TAB | 09 | 9 | Tab鍵 |
| VK_CLEAR | 0C | 12 | Clear鍵（Num Lock關閉時的數字鍵盤5） |
| VK_RETURN | 0D | 13 | Enter鍵 |
| VK_SHIFT | 10 | 16 | Shift鍵 |
| VK_CONTROL | 11 | 17 | Ctrl鍵 |
| VK_MENU | 12 | 18 | Alt鍵 |
| VK_PAUSE | 13 | 19 | Pause鍵 |
| VK_CAPITAL | 14 | 20 | Caps Lock鍵 |
| VK_ESCAPE | 1B | 27 | Ese鍵 |
| VK_SPACE | 20 | 32 | Spacebar鍵 |
| VK_PRIOR | 21 | 33 | Page Up鍵 |
| VK_NEXT | 22 | 34 | Page Domw鍵 |
| VK_END | 23 | 35 | End鍵 |
| VK_HOME | 24 | 36 | Home鍵 |
| VK_LEFT | 25 | 37 | LEFT ARROW 鍵(←) |
| VK_UP | 26 | 38 | UP ARROW鍵(↑) |
| VK_RIGHT | 27 | 39 | RIGHT ARROW鍵(→) |
| VK_DOWN | 28 | 40 | DOWN ARROW鍵(↓) |
| VK_Select | 29 | 41 | Select鍵 |
| VK_PRINT | 2A | 42 | Print鍵 |
| VK_EXECUTE | 2B | 43 | EXECUTE鍵 |
| VK_SNAPSHOT | 2C | 44 | Print Screen鍵（抓屏） |
| VK_Insert | 2D | 45 | Ins鍵(Num Lock關閉時的數字鍵盤0) |
| VK_Delete | 2E | 46 | Del鍵(Num Lock關閉時的數字鍵盤.) |
| VK_HELP | 2F | 47 | Help鍵 |
| VK_0 | 30 | 48 | 0鍵 |
| VK_1 | 31 | 49 | 1鍵 |
| VK_2 | 32 | 50 | 2鍵 |
| VK_3 | 33 | 51 | 3鍵 |
| VK_4 | 34 | 52 | 4鍵 |
| VK_5 | 35 | 53 | 5鍵 |
| VK_6 | 36 | 54 | 6鍵 |
| VK_7 | 37 | 55 | 7鍵 |
| VK_8 | 38 | 56 | 8鍵 |
| VK_9 | 39 | 57 | 9鍵 |
| VK_A | 41 | 65 | A鍵 |
| VK_B | 42 | 66 | B鍵 |
| VK_C | 43 | 67 | C鍵 |
| VK_D | 44 | 68 | D鍵 |
| VK_E | 45 | 69 | E鍵 |
| VK_F | 46 | 70 | F鍵 |
| VK_G | 47 | 71 | G鍵 |
| VK_H | 48 | 72 | H鍵 |
| VK_I | 49 | 73 | I鍵 |
| VK_J | 4A | 74 | J鍵 |
| VK_K | 4B | 75 | K鍵 |
| VK_L | 4C | 76 | L鍵 |
| VK_M | 4D | 77 | M鍵 |
| VK_N | 4E | 78 | N鍵 |
| VK_O | 4F | 79 | O鍵 |
| VK_P | 50 | 80 | P鍵 |
| VK_Q | 51 | 81 | Q鍵 |
| VK_R | 52 | 82 | R鍵 |
| VK_S | 53 | 83 | S鍵 |
| VK_T | 54 | 84 | T鍵 |
| VK_U | 55 | 85 | U鍵 |
| VK_V | 56 | 86 | V鍵 |
| VK_W | 57 | 87 | W鍵 |
| VK_X | 58 | 88 | X鍵 |
| VK_Y | 59 | 89 | Y鍵 |
| VK_Z | 5A | 90 | Z鍵 |
| VK_NUMPAD0 | 60 | 96 | 數字鍵0鍵 |
| VK_NUMPAD1 | 61 | 97 | 數字鍵1鍵 |
| VK_NUMPAD2 | 62 | 98 | 數字鍵2鍵 |
| VK_NUMPAD3 | 62 | 99 | 數字鍵3鍵 |
| VK_NUMPAD4 | 64 | 100 | 數字鍵4鍵 |
| VK_NUMPAD5 | 65 | 101 | 數字鍵5鍵 |
| VK_NUMPAD6 | 66 | 102 | 數字鍵6鍵 |
| VK_NUMPAD7 | 67 | 103 | 數字鍵7鍵 |
| VK_NUMPAD8 | 68 | 104 | 數字鍵8鍵 |
| VK_NUMPAD9 | 69 | 105 | 數字鍵9鍵 |
| VK_MULTIPLY | 6A | 106 | 數字鍵盤上的*鍵 |
| VK_ADD | 6B | 107 | 數字鍵盤上的+鍵 |
| VK_SEPARATOR | 6C | 108 | Separator鍵 |
| VK_SUBTRACT | 6D | 109 | 數字鍵盤上的-鍵 |
| VK_DECIMAL | 6E | 110 | 數字鍵盤上的.鍵 |
| VK_DIVIDE | 6F | 111 | 數字鍵盤上的/鍵 |
| VK_F1 | 70 | 112 | F1鍵 |
| VK_F2 | 71 | 113 | F2鍵 |
| VK_F3 | 72 | 114 | F3鍵 |
| VK_F4 | 73 | 115 | F4鍵 |
| VK_F5 | 74 | 116 | F5鍵 |
| VK_F6 | 75 | 117 | F6鍵 |
| VK_F7 | 76 | 118 | F7鍵 |
| VK_F8 | 77 | 119 | F8鍵 |
| VK_F9 | 78 | 120 | F9鍵 |
| VK_F10 | 79 | 121 | F10鍵 |
| VK_F11 | 7A | 122 | F11鍵 |
| VK_F12 | 7B | 123 | F12鍵 |
| VK_NUMLOCK | 90 | 144 | Num Lock 鍵 |
| VK_SCROLL | 91 | 145 | Scroll Lock鍵 |
| 上面沒有提到的：（都在大鍵盤） | |||
| VK_LWIN | 91 | 左win鍵 | |
| VK_RWIN | 92 | 右win鍵 | |
| VK_APPS | 93 | 右Ctrl左邊鍵，點擊相當於點擊鼠標右鍵，會彈出快捷菜單 | |
| 186 | ;(分號) | ||
| 187 | =鍵 | ||
| 188 | ,鍵(逗號) | ||
| 189 | -鍵(減號) | ||
| 190 | .鍵(句號) | ||
| 191 | /鍵 | ||
| 192 | `鍵(Esc下面) | ||
| 219 | [鍵 | ||
| 220 | \鍵 | ||
| 221 | ]鍵 | ||
| 222 | ‘鍵(引號) | ||
-end-