자바스크립트는 복사할 수 없습니다-프런트엔드 Q&A-php.cn

JavaScript는 웹 개발에 널리 사용되는 스크립팅 언어로 웹 페이지의 동적 상호 작용, 데이터 유효성 검사, 양식 작업 등과 같은 일련의 작업을 완료할 수 있습니다. 그러나 JavaScript를 사용할 때 때때로 일반적인 문제에 직면합니다. 텍스트 내용을 복사할 수 없습니다. 이 문서에서는 이 문제의 근본 원인을 조사하고 개발 과정에서 텍스트 복사 문제를 보다 원활하게 처리할 수 있도록 몇 가지 솔루션을 제공합니다.

JavaScript가 텍스트를 복사할 수 없는 이유는 무엇인가요?

먼저 JavaScript가 텍스트 콘텐츠를 복사할 수 없는 이유를 이해해야 합니다. 실제로 이 문제의 가장 일반적인 원인은 최신 브라우저의 보안 메커니즘에서 비롯됩니다. 사용자가 JavaScript 코드를 통해 텍스트 콘텐츠를 복사하려고 하면 브라우저는 사용자의 시스템 보안을 보호하기 위해 작업을 자동으로 차단합니다. 자바스크립트 코드가 사용자의 클립보드 내용에 접근할 수 있다면 누구나 악성코드를 작성해 비밀번호, 신용카드 정보 등 사용자의 민감한 정보에 접근할 수 있기 때문이다. 따라서 브라우저는 JavaScript가 클립보드에서 텍스트를 읽거나 쓰지 못하게 하는 경우가 많습니다.

해결책

최신 브라우저 보안 메커니즘으로 인해 JavaScript로 텍스트를 복사하는 것이 더 어려워지지만 완전히 불가능한 것은 아닙니다. 아래에서는 이 문제를 해결하기 위한 몇 가지 솔루션을 제공하겠습니다.

document.execCommand() 메서드 사용

document.execCommand() 메서드는 일부 사용자 명령을 실행할 수 있는 JavaScript 메서드입니다. 사용자 인터페이스를 작동하고 시스템과 상호 작용할 수 있으며 그 중 하나는 복사 작업입니다. 이 메서드는 버튼 클릭이나 단축키 사용과 같이 사용자가 시작한 작업 중에 호출되어야 합니다. 다음은 샘플 코드입니다.

function copyToClipboard(id) {
  var text = document.getElementById(id).innerText;
  var textarea = document.createElement("textarea");
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
}

로그인 후 복사

위 코드에서는 복사할 텍스트의 요소 ID를 나타내는 매개변수 ID를 받는 copyToClipboard() 함수를 정의합니다. 이 함수의 논리는 다음과 같습니다.

먼저 innerText 속성을 사용하여 지정된 요소에서 텍스트 콘텐츠를 가져옵니다.
그런 다음 createElement() 메서드를 사용하여 텍스트 영역 요소를 만들고 해당 값 속성에 텍스트 콘텐츠를 할당합니다.
다음으로 텍스트 영역 요소를 문서에 추가합니다(마지막 태그 앞에).
그런 다음 select() 메서드를 사용하여 textarea 요소의 텍스트 콘텐츠를 선택합니다.
마지막으로 document.execCommand() 메서드를 호출하여 복사 작업을 수행합니다.
clipboard.js 라이브러리 활용

clipboard.js는 텍스트 복사 작업을 쉽게 구현할 수 있는 JavaScript 라이브러리입니다. 이 라이브러리는 document.execCommand() 메서드를 호출할 필요가 없습니다. Clipboard.js 라이브러리는 이벤트 복사 및 붙여넣기가 아닌 권한이 부여된 브라우저 API를 기반으로 합니다. 이 라이브러리를 사용하면 소량의 JavaScript 코드를 작성하여 간단한 텍스트 복사 기능을 구현할 수 있습니다. 다음은 Clipboard.js 라이브러리를 사용하는 샘플 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Clipboard.js Sample</title>
  <!-- 引入clipboard.js库 -->
  <script src="clipboard.js"></script>
  <style type="text/css">
    div {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="copy-btn" data-clipboard-text="Hello, world!">
    Click me!
  </div>

  <script>
    // 初始化clipboard.js库
    new ClipboardJS('.copy-btn');
  </script>
</body>
</html>

로그인 후 복사

위의 샘플 코드에서는 먼저 clipsboard.js 라이브러리를 도입한 다음 data-clipboard-text 속성을 사용하여 div 요소를 정의했습니다. 이 속성은 복사할 텍스트 내용을 저장하는 데 사용됩니다. 마지막으로