일반 JavaScript의 "클립보드에 복사"기능

최신 브라우저에서는 Clipboard API를 사용하여 시스템 클립보드를 읽고 쓸 수 있습니다.

클립보드 API는 4가지 비동기 메서드로 구성됩니다.

navigator.clipboard.read() - 임의 데이터 읽기

navigator.clipboard.readText() - 텍스트 읽기

navigator.clipboard.write() - 임의 데이터 쓰기

navigator.clipboard.writeText() - 쓰기 텍스트

writeText() 메서드를 사용하여 간단한 "클립보드로 복사"기능을 구현하는 것은 매우 쉽습니다.

HTML:

<input type="text" id="copy-text">
<button id="copy-btn">Copy to Clipboard</button>

자바스크립트:

document.getElementById("copy-btn").addEventListener("click", function(e) {
  if (!navigator.clipboard) {
    console.error('Clipboard API is not available');
    return;
  }

  let text = document.getElementById("copy-text").value;
  navigator.clipboard.writeText(text).then(function() {
    console.log("Copied to clipboard");
  }, function(err) {
    console.error(err);
  })  
})

이 코드를 실행하려고 하면 복사 버튼을 클릭한 후 콘솔에 "클립보드에 복사됨"텍스트가 표시되어야 합니다.

설명

document.getElementById("copy-btn").addEventListener("click", function(e) {
  if (!navigator.clipboard) {
    console.error('Clipboard API is not available');
    return;
  }

먼저 "#copy-btn"버튼에 onclick 이벤트 핸들러를 연결하고 확인navigator.clipboard이 가능합니다. 우리는 코드가 중단되지 않는 경우 중단되는 것을 원하지 않으므로 오류를 기록하고 반환합니다.

  let text = document.getElementById("copy-text").value;

  navigator.clipboard.writeText(text).then(function() {
    console.log("Copied to clipboard");
  }, function(err) {
    console.error(err);
  })  

그런 다음 "복사 텍스트"입력 요소에서 텍스트 값을 가져오고 navigator.clipboard.writeText 메서드를 사용하여 시스템 클립보드에 씁니다. writeText는 Promise를 반환하는 async 메서드이며 Promise API를 직접(위와 같이) 사용하거나 async/await를 사용해야 합니다.

내가 자주 본 일반적인 실수는 다음과 같은 작업을 수행하는 것입니다.

navigator.clipboard.writeText(text)
console.log("Copied to clipboard")

writeText를 호출한 직후 "클립보드에 복사됨"을 기록합니다(작업의 성공 여부에 관계 없음).

권한 API

페이지가 활성 탭에 있을 때 "클립보드 쓰기"권한이 페이지에 자동으로 부여되지만 명시적으로 권한을 확인해야 하는 경우 다음과 같이 사용할 수 있습니다.

navigator.permissions.query({ name: "clipboard-write" }).then(p => console.log(p.state))

참고: 이것은 BetterWays.dev wiki 의 위키 페이지 스냅샷입니다. 더 나은 형식의 최신 버전은 betterways.dev/copy-to-clipboard-in-plain-javascript 에서 찾을 수 있습니다.