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

JavaScript에서 클립보드에 복사하는 방법

JavaScript에서는 브라우저 지원에 따라 텍스트를 클립보드에 복사하는 방법이 여러 가지가 있습니다.

1. 비동기 클립보드 API [navigator.clipboard.writeText]

Chrome 66에서 사용할 수 있는 Async Clipboard API는 클립보드에 대한 비동기 액세스를 제공합니다. JavaScript Promise를 사용하여 페이지를 방해하는 사용자 프롬프트 없이 원활한 실행을 허용합니다. 또한 변수에서 텍스트를 클립보드로 직접 복사할 수 있습니다. HTTPS를 통해 제공되는 페이지에서만 작동합니다.

2. document.execCommand('copy') (더 이상 사용되지 않음)

이 메서드는 동기식이며 2015년 4월 이후 대부분의 브라우저에서 지원됩니다. 프로세스가 완료될 때까지 JavaScript 실행을 중지하고 잠재적으로 사용자에게 보안 프롬프트를 표시합니다. . 텍스트는 DOM에서 클립보드로 복사됩니다.

일반 개발 참고 사항:

• 콘솔에서 코드를 테스트하는 동안 클립보드 명령이 작동하지 않을 수 있습니다.
• 액세스하려면 페이지가 활성화되어 있거나(Async Clipboard API의 경우) 사용자 상호 작용(document.execCommand('copy')의 경우)이 필요합니다.

대체 방법:

브라우저 간 호환성을 보장하려면 Async Clipboard API와 함께 대체 방법을 사용하는 것이 좋습니다. 예는 다음과 같습니다.

function fallbackCopyTextToClipboard(text) {
  // Create a textarea element and copy text to it
  const textArea = document.createElement("textarea");
  textArea.value = text;

  // Append the textarea to the body and set properties
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  // Execute the copy command
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  // Remove the textarea from the body
  document.body.removeChild(textArea);
}

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!