> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 Ctrl V 및 Ctrl C 키 조합을 감지하고 차단하는 방법은 무엇입니까?

JavaScript에서 Ctrl V 및 Ctrl C 키 조합을 감지하고 차단하는 방법은 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-10-27 11:49:02
원래의
1025명이 탐색했습니다.

How to Detect and Block Ctrl V and Ctrl C Key Combinations in JavaScript?

JavaScript에서 Ctrl V 및 Ctrl C 감지

사용자가 콘텐츠를 텍스트 영역에 붙여넣는 것을 방지하기 위해 JavaScript를 활용하여 감지하고 차단할 수 있습니다. 특정 키보드 조합.

일반적인 접근 방식은 keydown 및 keyup 이벤트를 사용하여 Ctrl 키(Mac의 경우 ctrlKey 또는 cmdKey)를 눌렀다 놓는 것을 모니터링하는 것입니다. Ctrl이 감지되면 이후에 V(붙여넣기) 또는 C(복사) 키를 누르는 것이 차단됩니다.

다음은 예제 코드 조각입니다.

<code class="javascript">$(document).ready(function() {
    var ctrlDown = false,
        ctrlKey = 17,
        cmdKey = 91,
        vKey = 86,
        cKey = 67;

    $(document).keydown(function(e) {
        if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = true;
    }).keyup(function(e) {
        if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = false;
    });

    $(".no-copy-paste").keydown(function(e) {
        if (ctrlDown &amp;&amp; (e.keyCode == vKey || e.keyCode == cKey)) return false;
    });
    
    // Document Ctrl + C/V 
    $(document).keydown(function(e) {
        if (ctrlDown &amp;&amp; (e.keyCode == cKey)) console.log("Document catch Ctrl+C");
        if (ctrlDown &amp;&amp; (e.keyCode == vKey)) console.log("Document catch Ctrl+V");
    });
});</code>
로그인 후 복사

이 코드에서 요소는 "no-copy-paste" 클래스에는 Ctrl V 및 Ctrl C가 비활성화되어 있습니다. 또한 코드는 문서의 아무 곳이나 누르면 이러한 키 조합을 기록합니다.

구현

이를 텍스트 영역에 구현하려면 HTML과 CSS를 사용할 수 있습니다.

<code class="html"><h3>Ctrl+c Ctrl+v disabled</h3>
<textarea class="no-copy-paste"></textarea>
<br><br>
<h3>Ctrl+c Ctrl+v allowed</h3>
<textarea></textarea></code>
로그인 후 복사
<code class="css">.no-copy-paste {
    -webkit-user-select: none;  /* Chrome/Safari */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE/Edge */
    user-select: none;          /* Standard syntax */
}</code>
로그인 후 복사

이 접근 방식은 텍스트가 보호된 텍스트 영역에 복사되어 붙여넣어지는 것을 효과적으로 방지합니다.

위 내용은 JavaScript에서 Ctrl V 및 Ctrl C 키 조합을 감지하고 차단하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿