8-2 LPさぁ

本節將介紹鍵盤與滑鼠事件,以及相關範例。

我們可以偵測某一個特定按鍵是否被按下,其步驟如下:

  1. 利用 document.onkeydown 來抓到「按鍵事件」,並指定相關的事件處理程式。
  2. 在事件處理程式中,可以利用 window.event.keycode 來知道按鍵代碼,並進行相關的處理。
以下是一個具體範例,只要你按下任何一個鍵盤,就會顯示對應的代碼,如下:

Example(keyboardEvent01.htm):

上述範例的完整原始檔案如下:

原始檔(keyboardEvent01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>
<body>
<h2 align=center>鍵盤事件:基本測試</h2>
<hr>

<script>
function keyFunction() {
	alert("Key code = " + event.keyCode);
	if (event.keyCode==27) {
		alert("Esc 的內建功能已被取消!");
		return false;
	} else if (event.keyCode==8) {
		alert("Backspace 的內建功能已被取消!");
		return false;
	} else if (event.keyCode==9) {
		alert("Tab 的內建功能已被取消!");
		return false;
	} else if (event.keyCode==71) {
		document.location="http://www.google.com";
	}
}
document.onkeydown=keyFunction;
</script>

請按下鍵盤任意鍵,以顯示按鍵代碼!請注意,下列按鍵的內建功能已被取消:
<ul>
<li>Esc
<li>Tab
<li>Backspace
</ul>
此外,"g" 鍵有特殊功能!

<hr>
</body>
</html>

在上述範例中,我們使用 onkeydown 事件來執行 keyFunction() 函數。特別要注意的是,如果事件處理程式回傳給 document.onkeydown 的值為 false,則原先按鍵的預設功能將會被取消。例如,上述範例的 Backspace(回到上一頁)的預設功能就已經被取消了。

Hint
window.event.keycode 可以簡寫成 event.keycode。

有時候我們要定義一些「熱鍵」來執行特殊功能,但是這些熱鍵最好是複合鍵(先按 Shift 或 Ctrl 或 Alt 不放,再按任意鍵),以免蓋掉原有的預設功能,因此我們就要能夠偵測複合鍵常用的 Shift、Ctrl、Alt,可見下列範例:

Example(keyboardEvent02.htm):

上述範例的完整原始檔案如下:

原始檔(keyboardEvent02.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>鍵盤事件:偵測複合鍵</h2>
<hr>

<script>
// Shift 的鍵盤代碼是 16,Ctrl 的鍵盤代碼是 17,Alt 的鍵盤代碼是 18
function keyFunction() {
	// 若不加第二個條件,會印出兩次警告視窗
	// 一次是按 Shift,第二次是按其他鍵
	if ((event.shiftKey) && (event.keyCode!=16))	
		alert("Shift + "+event.keyCode);
	if ((event.ctrlKey) && (event.keyCode!=17))
		alert("Ctrl + "+event.keyCode);
	if ((event.altKey) && (event.keyCode!=18))
		alert("Alt + "+event.keyCode);
}
document.onkeydown=keyFunction;
</script>
請按下鍵盤任意複合鍵(先按 Shift 或 Ctrl 或 Alt 不放,再按任意鍵),以顯示按鍵代碼!

<hr>
</body>
</html>

由上述範例可知,我們可用 event.shiftKey、event.ctrlKey、event.altKey 的值是否是 true 來確認 Shift(鍵盤代碼是 16)、Ctrl(鍵盤代碼是 17)、Alt(鍵盤代碼是 18) 的按鍵是否是在被按下的狀態。類似的性質還有:

Hint
如何偵測 Windows 鍵和其他鍵所形成的組合鍵?若有讀者知道,請將範例寄給我,謝謝。

以下是一個作弄人的網頁:

Example(keyboardEvent03.htm):

上述範例的完整原始檔案如下:

原始檔(keyboardEvent03.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>
<body>
<h2 align=center>鍵盤事件:作弄人的網頁</h2>
<hr>

<script>
function encrypt(){
	event.keyCode-=1;
}
function check(){
	if (testField.value=="I am a pig")
		alert("答對了!");
}
</script>
請由鍵盤輸入「J!bn!b!qjh」:
<p>
<input id=testField onKeyPress="encrypt()" onKeyUp="check()">

<hr>
</body>
</html>

在上述範例中,我們使用 input 標籤的 onKeyPress 事件來即時改變使用者的輸入,並用 onKeyUp 事件來檢查使用者是否完成正確輸入。

在以下的網頁中,紅色方塊將隨著你的滑鼠移動:

Example(newCursor01.htm):

上述範例的完整原始檔案如下:

原始檔(newCursor01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body onmousemove="newCursor()">
<h2 align=center>鍵盤事件:黏住游標的方塊</h2>

<script>
function newCursor() {
	redSquare.style.posLeft=event.clientX-10;
	redSquare.style.posTop=event.clientY-10;
}
</script>
<div id=redSquare style="position:absolute; top:10; left:10; height:20; width:20; background-color:red"></div>

</body>
</html>

在上述原始碼中,我們使用 id=redSquare 來代表紅色方塊,event.clientX 及 event.clientY 分別代表滑鼠相對應於網頁視窗的 X 和 Y 座標。

在以下的網頁中,你可以使用方向鍵(箭頭鍵)來移動網頁中的綠色方塊:

Example(squareMover01.htm):

上述範例的完整原始檔案如下:

原始檔(squareMover01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body onkeydown="move()">
<h2 align=center>鍵盤事件:使用方向鍵來移動物件</h2>
<hr>

<script>
function move(){
	ek=event.keyCode;
	if (ek==37) myArea.style.posLeft-=5;
	if (ek==39) myArea.style.posLeft+=5;
	if (ek==38) myArea.style.posTop-=5;
	if (ek==40) myArea.style.posTop+=5;
}
</script>
<div id=myArea style="position:absolute; top:20; left:20; height:50; width:50; background-color:#00FF00"></div>
請按鍵盤的方向鍵來移動綠色的方塊。

<hr>
</body>
</html>

另外,利用 event.button,我們可以偵測使用者用來產生滑鼠事件的滑鼠鍵(左鍵或是右鍵),例如:

Example(mouseEvent01.htm):

在上述範例中,使用不同滑鼠按鍵去點選文字,就會產生不同的警告視窗來顯示所用的滑鼠按鍵。上述範例的完整原始檔案如下:

原始檔(mouseEvent01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>滑鼠事件:偵測滑鼠鍵</h2>
<hr>

<script>
function showMouseButton() {
	switch (event.button){
		case 1:
			alert("你用滑鼠左鍵!");
			break;
		case 2:
			alert("你用滑鼠右鍵!");
			break;
		case 4:
			alert("你用滑鼠中鍵!");
			break;
		default:
			alert("未知的滑鼠鍵!");
			break;
	}
}
</script>
<div onMouseDown="showMouseButton()">請用滑鼠按我!</div>

<hr>
</body>
</html>

在上述範例中,我們使用 event.button 來偵測滑鼠按鍵:

為了防止(或是阻礙)使用者下載圖片或是檢視原始檔,我們可以取消滑鼠右鍵的預設功能,範例如下:

Example(disableRightButton01.htm):

在上述範例中,我們使用 event.button 來偵測滑鼠鍵,如果是右鍵,則以警告視窗嘲笑使用者,並回傳 false,以取消預設之功能。當然,「道高一尺,魔高一丈」,若你還是執意要抓圖,在上述網頁按下 Ctrl-a,即可看到撇步。(由於篇幅有限,不再列出本範例之程式碼,你可以由範例網頁自行檢視原始碼。)

相關範例:


JavaScript 程式設計與應用:用於網頁用戶端