javascript基礎（鍵盤事件）（三十八）

厚積薄發2017發表於2017-02-14
JavaScript事件

1鍵盤事件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 鍵盤事件一般都要繫結給可以獲取焦點的元素（一般指表單項），或者是document
				 * 
				 * onkeydown
				 * 	- 按鍵按下事件
				 * onkeyup
				 * 	- 按鍵鬆開事件
				 * 
				 */
				
				//為document繫結一個按鍵按下事件
				/*
				 * 當按下鍵盤上的一個按鍵一直不鬆開時，會連續的觸發onkeydown事件，
				 * 	但是第一次觸發和第二次觸發的間隔會比較長，而第二次以後會一直連續觸發
				 * 	這種設計是為了防止誤操作
				 */
				document.onkeydown = function(event){
					event = event || window.event;
					
					//獲取按的是哪個按鍵
					/*
					 * event中有一個keyCode，可以用來獲取當前按鍵的編碼
					 * 	可以通過keyCode來識別使用者按下的按鍵
					 * 
					 * 除了keyCode，還提供了三個屬性
					 * 	altKey
					 * 	ctrlKey
					 * 	shiftKey
					 * 		- 專門用來判斷alt ctrl shift是否被按下
					 * 			如果按下返回true，沒有返回false
					 */
					//console.log(event.keyCode);
					
					//console.log(event.ctrlKey);
					
					//判斷e和ctrl是否被同時按下
					/*if(event.keyCode == 69 && event.ctrlKey){
						console.log("e和ctrl被按下了~~~");
					}*/
					
				};
				
				/*document.onkeyup = function(){
					console.log("按鍵鬆開了");
				};*/
				
				
				var inp = document.getElementById("inp");
				
				inp.onkeydown = function(event){
					
					event = event || window.event;
					
					//console.log(event.keyCode);
					
					//console.log("按下了");
					
					//在文字框中輸出文字，是onkeydown的預設行為
					//如果在最後取消了預設行為，則不會在文字框中顯示內容
					//return false;
					
					/*
					 * 使使用者不能在文字框中輸入數字
					 */
					
					//判斷使用者輸入的是否是數字
					if(event.keyCode >= 48 && event.keyCode <= 57){
						//如果是數字，則取消預設行為
						return false;
					}
					
					
					
				};
				
			};
			
		</script>
	</head>
	<body>
		
		<input id="inp" type="text" />
	</body>
</html>


練習：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 使div可以根據不同的按鍵向不同的方向移動
				 */
				
				//獲取box1
				var box1 = document.getElementById("box1");
				
				//繫結一個按鍵按下的事件
				document.onkeydown = function(event){
					
					event = event || window.event;
					
					//建立一個變數來表示速度
					var speed = 10;
					
					//如果使用者按了ctrl鍵，則加速
					if(event.ctrlKey){
						speed = 100;
					}
					
					//判斷哪個按鍵被按下
					/*
					 * 左 37    右 39
					 * 上38     下 40
					 * 
					 */
					switch(event.keyCode){
						case 37 :
							//使div向左移動 , 減少left屬性值
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 39 :
							//使div向右移動 , 增加left屬性值
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 38 :
							//使div向上移動 , 減少top屬性值
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 40 :
							//使div向上移動 , 增加top屬性值
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
					
				};
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>


 

 

相關文章