티스토리 뷰

HTML&CSS&Javscript&Jquery

190826 키보드 이벤트

猫猫 2019. 8. 26. 21:49
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>keyboard event</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>
<script>
	$(function(){
		$("input").keydown(function(){ //기능 발동 전
			$(this).val("keyDown");//alert 뜨고 나서 a가 인풋에 적힌다. 
		});
		
/* 		$("input").keyup(function(){ //기능 발동 후
			$(this).val("keyUP");//적히고 나서 keyUP이 뜨니까 keyup만 보임 
		}); */
		
		$("input").keyup(function(e){ //기능 발동 후
			$(this).val(e.keyCode);//key의 아스키코드
			if(e.keyCode==13){
				$(this).val("enter key");
			}
		});
		
		var h1X=0;
		var h1Y=0;
		
		
		$("html").keydown(function(e){
			switch(e.keyCode){
			case 37:
				h1X-=5;
				$("h1").css("left", h1X+"px");
				break;
			case 38:
				h1Y-=5;
				$("h1").css("top", h1Y+"px");
				break;
			case 39:
				h1X+=5;
				$("h1").css("left", h1X+"px");
				break;
			case 40:
				h1Y+=5;
				$("h1").css("top", h1Y+"px");
				break;
			}
		});	
	});


</script>
<style>
	h1{
		position:fixed;	
	}

</style>

</head>
<body>
	<input>
	<h1>hi</h1>
</body>
</html>
반응형
저작자표시 비영리 변경금지

'HTML&CSS&Javscript&Jquery' 카테고리의 다른 글

190826 메뉴 클릭 시 애니메이트로 메뉴 이동시키기  (0) 2019.08.26
190826 셀렉트, 스크롤 바닥 됐을때 다음 내용 이어붙이기  (0) 2019.08.26
190826 마우스 이벤트  (0) 2019.08.26
190812 foreach 예제  (0) 2019.08.23
190819 reduce,map 예제  (0) 2019.08.23