본문 바로가기

Story/html/css

복사금지 PC , 모바일

반응형

사이트내 컨텐츠를 긁어 가지 못하도록 처리할때 보통

 

<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">

 

처럼 처리하거나

 

javascript 를 이용하여

 

document.oncontextmenu = new Function ('return false');
document.ondragstart = new Function ('return false');
document.onselectstart = new Function ('return false');

 

처럼 사용한다.

 

그러나 요즘 모바일도 사용을 많이 하는대 모바일에서는 복사가 된다. taphold 이벤트를 통해서 컨텐츠를 오래 누르고 있으면 메뉴가 활성화 되서 복사가 가능해진다.

 

하지만 아래와 같은 방법으로 css 만으로도 막는게 가능하다.

 

<style type="text/css">
body{
 /* Prevent tablets from selecting text on taphold, etc:
    Note:
    If only the potential menu trigger elements should be protected, simply
    use the 'preventSelect: true' option.
    But we disable it more globally for tablet pc's, because the whole line
    or paragraph will still be selected otherwise.
  */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
</style>

 

 

출처 https://github.com/mar10/jquery-ui-contextmenu/blob/master/demo/index.html

 

반응형