JavaScript에서 텍스트를 클립보드에 효율적으로 복사하려면 어떻게 해야 합니까?

JavaScript에서 클립보드에 복사

일반 개요

JavaScript에서 텍스트를 클립보드에 복사하려면 세 가지 방법이 있습니다. 열쇠 API:

1. Async Clipboard API(navigator.clipboard.writeText):

   • Chrome 66 이상용 기본 API(2018년 3월) ).
   • JavaScript Promise를 사용한 비동기 액세스로 원활한 사용자 경험을 제공합니다.
   • 텍스트는 변수에서 직접 복사할 수 있습니다.
   • 액세스하려면 HTTPS가 필요합니다. clipsboard.

2. document.execCommand('copy'):

   • 지원되지 않지만 널리 지원됩니다.
   • 동기 액세스, 복사가 완료될 때까지 JavaScript 실행을 중단합니다. 완료됩니다.
   • DOM에서 텍스트를 읽어 클립보드에 배치합니다.
   • 콘솔에서 테스트하는 동안 보안 프롬프트를 표시할 수 있습니다.

3. 사본 재정의 이벤트:

   • 모든 복사 이벤트에서 클립보드 데이터 수정을 허용합니다.
   • 일반 텍스트 이외의 다양한 데이터 형식을 지원합니다.

개발 참고

• 클립보드 관련 명령은 콘솔 테스트에서 작동하지 않을 수 있습니다. 페이지 상호 작용이나 활성 탭이 필요한 경우가 많습니다.
• IFRAME의 교차 출처 권한에 대한 브라우저 지원 중단으로 인해 포함된 데모는 Chrome 및 Microsoft Edge와 같은 브라우저에서 작동하지 않을 수 있습니다.

Async Plus Fallback

Async Clipboard API와 대체 기능 결합 document.execCommand('copy')는 광범위한 브라우저 지원을 보장합니다:

function 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);
  });
}

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