[Jquery] 소스보기, 새로고침, 드래기 막기 소스

개발 노트/JQuery  2012.09.08 17:36



안녕하세요. 개발자 명월입니다.

 

웹페이지 개발할 때 자주 쓰이는 소스보기 막기, 새로고침 막기, 드래그 막기 소스 입니다. 그럼 살펴보겠습니다.

 

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2 <HTML>
  3 <HEAD>
  4 <TITLE> New Document </TITLE>
  5 <script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  6 <script>
  7 $(document).ready(function(){
  8 document.onkeydown = function(){
  9 if(event.srcElement.type != "text" && event.srcElement.type != "textarea"){
10 if(event.keyCode == 116){
11 event.keyCode = 2;
12 return false;
13 }
14 else if(event.ctrlKey && (event.keyCode == 78 || event.keyCode == 82)){
15 return false;
16 }else if(event.keyCode == 8){
17 return false;
18 }
19 }
20 }
21 document.ondragstart = function(){
22 if(event.srcElement.type != "text" && event.srcElement.type != "textarea"){
23 return false;
24 }
25 }
26 document.onselectstart = function(){
27 if(event.srcElement.type != "text" && event.srcElement.type != "textarea"){
28 return false;
29 }
30 }
31 document.oncontextmenu = function(){
32 if(event.srcElement.type != "text" && event.srcElement.type != "textarea"){
33 return false;
34 }
35 }
36 });
37 </script>
38 </HEAD>
39 <BODY>
40 Test
41 </BODY>
42 </HTML>
43

 

 

위 소스는 조금 복잡하게 되어있으나 설명하겠습니다.

 

  1 document.onkeydown = function(){
  2 	if(event.srcElement.type != "text" && event.srcElement.type != "textarea"){
  3 		if(event.keyCode == 116){
  4 			event.keyCode = 2;
  5 			return false;
  6 		}
  7 		else if(event.ctrlKey && (event.keyCode == 78 || event.keyCode == 82)){
  8 			return false;
  9 		}else if(event.keyCode == 8){
 10 			return false;
 11 		}
 12 	}
 13 }


이부분 keydown을 막는 부분입니다.

첫번째 if에서는 document 의 모든 객체 중에서 text, textarea 는 제외한 모든 객체를 설명하는 것입니다. 해보시면 알겠지만 text, textarea 까지 막아 버림 무척 당황스럽습니다. 그중 백스페이스라던가 del도 막히면 사용하는데 많이 불편합니다.

그리고 textbox 안에서는 Ctrl + C, Ctrl + V 가능하게 바꾸는 항목도 있습니다. 이런 저런 사용해 본 결과 Text 값은 풀어놓는게 여러모로 편합니다. 그 외에 F5키 F12키는 막혀 있습니다.

 

  1 document.ondragstart = function(){
  2 	if(event.srcElement.type != "text" && event.srcElement.type != "textarea"){
  3 		return false;
  4 	}
  5 }
  6 document.onselectstart = function(){
  7 	if(event.srcElement.type != "text" && event.srcElement.type != "textarea"){
  8 		return false;
  9 	}
 10 }
 11 document.oncontextmenu = function(){
 12 	if(event.srcElement.type != "text" && event.srcElement.type != "textarea"){
 13 		return false;
 14 	}
 15 }


 ondragstart 와 onselectstart 는 드래그와 관계된 함수 입니다. 이부분은 text와 textarea 묶어도 상관은 없으나 저같은 경우는 풀어놓았습니다. 묶어 놓을려면 if 문을 삭제하면 되겠습니다.

 

oncontextmenu는 정확히 말하면 오른쪽 마우스를 막아논 형태가 아닌 그 컨택트 메뉴를 막아놓은 형태입니다. 이 부분도 위와 같이 text, textarea는 예외로 했습니다.

 

이안에 특정객체는 풀어 놓는다. 예를 들면 tistory에 복사하기는 막아 놓지만 소스 부분은 누구나 퍼갈 수 있게 해놓고 싶으면 소스 부분만 따로 div로 묶은후 그부분만 text 같이 예외로 풀어서 사용하면 되겠습니다.

 

저는 긁기 보다는 첨부파일로 놔두겠습니다.

 

Jquery.html

 


댓글 0개가 달렸습니다.
댓글쓰기