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

Development note/Javascript, JQuery, CSS  2012. 9. 8. 17:36

안녕하세요. 명월입니다.

 

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE> New Document </TITLE>
    <script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      document.onkeydown = function(){
        if(event.srcElement.type != "text" && event.srcElement.type != "textarea"){
          if(event.keyCode == 116){
            event.keyCode = 2;
            return false;
          } else if(event.ctrlKey && (event.keyCode == 78 || event.keyCode == 82)){
            return false;
          }else if(event.keyCode == 8){
            return false;
          }
        }
      }
      document.ondragstart = function(){
        if(event.srcElement.type != "text" && event.srcElement.type != "textarea"){
          return false;
        }
      }
      document.onselectstart = function(){
        if(event.srcElement.type != "text" && event.srcElement.type != "textarea"){
          return false;
        }
      }
      document.oncontextmenu = function(){
        if(event.srcElement.type != "text" && event.srcElement.type != "textarea"){
          return false;
        }
      }
    });
    </script>
  </HEAD>
  <BODY>
    Test
  </BODY>
</HTML>

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

document.onkeydown = function(){
  if(event.srcElement.type != "text" && event.srcElement.type != "textarea"){
    if(event.keyCode == 116){
      event.keyCode = 2;
      return false;
    }else if(event.ctrlKey && (event.keyCode == 78 || event.keyCode == 82)){
      return false;
    }else if(event.keyCode == 8){
      return false;
    }
  }
}

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

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

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

document.ondragstart = function(){
  if(event.srcElement.type != "text" && event.srcElement.type != "textarea"){
    return false;
  }
}
document.onselectstart = function(){
  if(event.srcElement.type != "text" && event.srcElement.type != "textarea"){
    return false;
  }
}
document.oncontextmenu = function(){
  if(event.srcElement.type != "text" && event.srcElement.type != "textarea"){
    return false;
  }
}

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

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

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

Jquery.html

'Development note > Javascript, JQuery, CSS' 카테고리의 다른 글

[Javascript] 소스 보기 라이브러리 - Syntaxhighlighter  (0) 2013.03.12
[Jquery] 스크롤링 효과 예제  (0) 2012.10.06
[Jquery] 롤링 라이브러리 - jcarousellite  (0) 2012.09.24
[Jquery] Html에서 나타내는 Treeview  (0) 2012.09.22
[Jquery] 슬라이드 메뉴  (8) 2012.09.19
[Jquery] Ajax xml 파싱  (0) 2012.09.13
[Jquery] append(), appendto()  (0) 2012.09.09
[Jquery] Ajax 관련 이벤트  (0) 2012.09.07