모든 브라우저에서 JavaScript로 텍스트를 클립보드에 복사하려면 어떻게 해야 합니까?

JavaScript에서 클립보드에 복사하는 방법(브라우저 간)

개요

다음으로 텍스트를 클립보드에 복사하면 세 가지 기본 브라우저를 활용할 수 있습니다. API:

1. 비동기 클립보드 API(navigator.clipboard.writeText)
2. document.execCommand('copy')(사용되지 않음)
3. 사본 재정의 이벤트

일반 개발 고려 사항

• 콘솔에서 코드를 테스트할 때 클립보드 기능을 비활성화합니다.
• 페이지는 다음과 같아야 합니다. 활성(Async Clipboard API) 또는 액세스하려면 사용자 상호 작용(document.execCommand('copy'))이 필요합니다. 클립보드.

구현

Async Fallback

최상의 브라우저 적용 범위를 위해 Async Clipboard API를 다음과 결합합니다. 대체 document.execCommand('copy'):

copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

클립보드 API 비교

API

기능

지원

API	Features	Support
Async Clipboard API	Text-focused, asynchronous, supports HTTPS	Chrome 66 (March 2018), works in inactive tabs
document.execCommand('copy')	Synchronous, reads text from DOM	Most browsers (as of April 2015), displays permission prompts
Overriding the Copy Event	Can modify clipboard content from any copy event, supports various data formats	Not directly related to the question

비동기 클립보드 API

텍스트 중심, 비동기식, HTTPS 지원

Chrome 66(2018년 3월), 비활성 탭에서 작동

document.execCommand('copy')

동기식, 다음에서 텍스트를 읽습니다. DOM

대부분의 브라우저(2015년 4월 기준)는 권한 프롬프트를 표시합니다.

복사 이벤트 재정의

모든 복사 이벤트에서 클립보드 내용 수정 가능, 다양한 데이터 형식 지원

직접적으로 관련 없음 질문

참고(2020/02/20)지원 중단된 권한으로 인해 일부 브라우저에서 코드 조각이 작동하지 않습니다. . 테스트 및 개발을 위해 HTTPS를 통해 제공되는 활성 웹페이지를 사용하세요.

위 내용은 모든 브라우저에서 JavaScript로 텍스트를 클립보드에 복사하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!