브라우저 JavaScript를 사용하여 OS 클립 보드에 액세스하는 것은 document.execCommand()를 사용하여 수년 동안 가능했습니다.

불행히도 몇 가지 문제가 있습니다.

• 클립 보드 액세스는 동기식이므로 성능 및 보안에 영향을 미칩니다.
• 특히 macOS 및 iOS의 이전 버전의 Safari에서 지원이 불안정합니다.
• 권한 액세스는 브라우저에 따라 다릅니다.
• API는 우아하다고 생각할 수 없습니다.

마침내 새로운 비동기 클립 보드 API로 대체되었습니다. 새롭고 모든 기능을 지원하는 브라우저는 없지만 사용하기 쉽고 강력합니다.

https://www.sitepoint.com/clipboard-api/

앱이 클립 보드에 액세스해야 하는 이유는 무엇입니까? 

개발자는 클립 보드의 작동 방식을 알고 있으며 다음 단축키를 정기적으로 사용합니다.

• Ctrl | Cmd + C to copy
• Ctrl | Cmd + X to cut
• Ctrl | Cmd + V to paste

컴퓨팅 경험이 적은 사람들이 반드시 그 지식을 가지고 있는 것은 아닙니다. 또한 키보드 단축키를 사용할 수 없는 터치 스크린 기기를 사용 중일 수 있습니다. 사용하기 쉬운 잘라 내기 및 붙여 넣기 아이콘을 제공하는 것이 유용 할 수 있습니다.

또한 서식 추가 또는 제거와 같은 클립 보드 작업이 완료되면 내용을 수정할 수 있습니다.

클립 보드 액세스는 위험합니다! 

프로그래밍 방식으로 클립 보드에 액세스하면 몇 가지 보안 문제가 발생합니다.

• 사용자는 종종 암호 또는 개인 정보를 복사하므로 페이지가 클립 보드 데이터를 임의로 읽을 수 없어야 합니다.
• 클립 보드에 데이터를 추가 할 때 페이지를 제한해야 합니다. 악의적인 페이지는 복사 된 텍스트를 위험한 명령이나 실행 파일로 바꿀 수 있습니다.

잠재적인 문제를 방지하기 위해 클립 보드 API는 HTTPS를 통해 제공되는 페이지에서만 사용할 수 있습니다 (localhost도 허용됨). iframe에서 실행되는 경우 상위 페이지는 클립 보드 읽기 및 / 또는 클립 보드 쓰기 권한도 부여해야 합니다.

<iframe
  src="childpage.html"
  allow="clipboard-read; clipboard-write"
></iframe>

API는 백그라운드 탭이 아닌 활성 브라우저 탭에서만 사용할 수 있으며 클릭과 같은 사용자 상호 작용에 의해서만 트리거될 수 있습니다. 필요한 경우 사용자에게 클립 보드 데이터 읽기 권한을 묻는 메시지가 표시됩니다.

이 경고는 페이지가 처음 클립 보드 액세스를 요청할 때 표시됩니다. API가 비동기식이고 Promise를 반환하므로 문제가 발생해서는 안됩니다. Permissions API를 사용하여 상태를 조사하고 요청할 수도 있습니다.

클립 보드 API 기능 감지 

Clipboard API는 navigator.clipboard가 정확한 결과를 반환 할 때 사용할 수 있습니다. 예를 들면 :

if (navigator.clipboard) {

  console.log('Clipboard API available');

}

그러나 이것이 브라우저가 모든 기능을 지원한다는 것을 보장하지는 않으므로 추가 확인이 필요합니다. 예를 들어 작성 당시 Chrome은 API의 readText() 메서드를 지원하지만 Firefox는 지원하지 않습니다.

텍스트 복사 및 붙여 넣기 

텍스트 복사 및 붙여 넣기는 대부분의 응용 프로그램에서 유용한 옵션입니다. API는 매우 간단합니다.

// copy text TO the clipboard
await navigator.clipboard.writeText('This text is now in the clipboard');

// get text FROM the clipboard
let text = await navigator.clipboard.readText();

지원을 감지하고 오류를 처리하려면 훨씬 더 많은 코드가 필요합니다.

클립 보드 API 텍스트 데모보기

코드는 GitHub에서 다운로드 할 수 있습니다. JavaScript에 대해서는 clipboardtext.js를 참조하십시오.

이 예제는 데이터 복사 속성이 버튼과 같은 HTML 요소를 추가 할 때 텍스트 복사를 구현합니다. 이 값을 다음 중 하나로 설정할 수 있습니다.

• 하드 코딩 된 문자열 — data-copy = "이것을 클립 보드로 복사"와 같은.
• CSS 선택기 — data-copy = "# mysection"과 같은. 그런 다음 첫 번째 일치 요소의 텍스트 콘텐츠가 복사됩니다.

선택적으로 데이터 완료 속성에서 사용자 지정 성공 메시지를 설정할 수 있습니다.

<button data-copy="#mysection" data-done="section copied">
  copy text from #mysection
</button>

버튼은 navigator.clipboard.writeText()가 지원되는 경우에만 표시됩니다. 클릭하면 JavaScript 이벤트 핸들러가 텍스트를 찾아 클립 보드에 복사하고 애니메이션 성공 메시지를 표시합니다.

텍스트 붙여 넣기 버튼은 DOM 노드를 가리켜야하는 data-paste 속성을 정의한다는 점을 제외하면 매우 유사합니다.

<textarea id="pastehere"></textarea>
<button data-paste="#pastehere">paste</button>

데이터 복사 및 붙여 넣기 

Clipboard API의 readText() 및 writeText()는 보다 일반적인 read() 및 write() 메서드를 위한 편의 옵션입니다. 브라우저 지원이 적지 만 이진 이미지와 같은 모든 유형의 데이터를 복사하여 붙여 넣을 수 있습니다.

복사하려면 일반적으로 fetch() 또는 canvas.toBlob() 메서드에서 반환하는 blob 데이터가 필요합니다. 이것은 클립 보드에 쓸 수 있도록 ClipboardItem 생성자에 전달됩니다.

const
  image = await fetch('myimage.png'),
  blob = await image.blob();

await navigator.clipboard.write([
  new ClipboardItem({ [blob.type]: blob })
]);

여러 ClipboardItem 개체가 서로 다른 콘텐츠 형식으로 반환 될 수 있으므로 붙여 넣기가 더 복잡합니다. 따라서 유용한 형식을 찾을 때까지 각 유형을 반복해야 합니다. 예를 들면 :

const clipboardItems = await navigator.clipboard.read();

for (const clipboardItem of clipboardItems) {

  for (const type of clipboardItem.types) {

    if (type === 'image/png') {

      // return PNG blob
      return await clipboardItem.getType(type);

    }

  }

}

Clipboard API 이미지 데모를 봅니다 (Chromium 기반 브라우저에서 지원됨).

코드는 GitHub에서 다운로드 할 수 있습니다. JavaScript에 대해서는 clipboardtext.js를 참조하십시오.

이것은 복사 및 붙여 넣기 버튼이 data-copyblob 및 data-pasteblob 속성의 CSS 선택기를 사용하여 DOM 요소를 가리켜야 한다는 점에서 텍스트 데모와 유사한 방식으로 작동합니다. 예를 들면 :

<!-- copy image -->
<img id="myimage" src="myimage.png" alt="any image" />

<button data-copyblob="#myimage" data-done="image copied">
  copy image
</button>

<!-- paste into DOM -->
<div id="imagelist"></div>

<button data-pasteblob="#imagelist">
  paste image
</button>

그래픽 응용 프로그램에서 이미지 데이터를 복사 한 다음 붙여 넣기 버튼을 사용하십시오.

이벤트 잘라 내기, 복사 및 붙여 넣기 

잘라 내기, 복사 및 붙여 넣기 이벤트는 사용자가 브라우저에서 클립 보드 작업을 시작할 때마다 발생합니다. 일반적으로 위에서 언급 한 마우스 오른쪽 버튼 클릭 메뉴 또는 키보드 단축키를 사용합니다. 이는 대부분의 브라우저에서 지원되며 핸들러 함수는 이벤트를 가로 채서 매개 변수로 전달 된 클립 보드 데이터 객체를 사용하여 변경할 수 있습니다.

다음 함수는 잘라내거나 복사 한 모든 텍스트를 대문자로 만듭니다. e.preventDefault()는 이를 재정의 하는 기본 잘라 내기 / 복사 작업을 중지합니다.

body.addEventListener('cut', cutCopyHandler);
body.addEventListener('copy', cutCopyHandler);

// cut or copy event handler
function cutCopyHandler(e) {

  const selection = document.getSelection();

  // send uppercase text to clipboard
  e.clipboardData.setData(
    'text/plain',
    selection.toString().toUpperCase()
  );

  if (e.type === 'cut') selection.deleteFromDocument();

  // stop default cut/copy
  e.preventDefault();

}

다음 코드는 특정 <textarea> 필드에 붙여 넣기 처리기를 연결합니다. 이 함수는 기존 내용을 지우고 "pasted :"라는 텍스트 앞에 붙습니다.

document.getElementById('field1').addEventListener('paste', pasteEvent);

// paste event handler
function pasteEvent(e) {

  // add 'pasted:' to pasted text
  const paste = 'pasted:\n' +
    (e.clipboardData || window.clipboardData).getData('text');

  e.target.value = paste;

  // stop default paste
  e.preventDefault();
}

클립 보드 API 이벤트 데모보기

코드는 GitHub에서 다운로드 할 수 있습니다. JavaScript에 대해서는 clipboardtext.js를 참조하십시오.

사용할 준비가 되셨습니까? 

Clipboard API는 새롭지 만 합리적인 브라우저 지원을 제공하며 이전 document.execCommand() 옵션보다 더 강력하다고 느낍니다.

점진적 향상으로 추가하는 것이 가장 좋으므로 잘라 내기, 복사 및 붙여 넣기 기능은 시설을 사용할 수 있을 때만 응용 프로그램에서 구현됩니다. 먼저 시작하려면 여기에 제공된 코드를 사용하십시오.