웹용 한 줄 복사 버튼

요약: Clipboard API은 상당히 좋습니다.

한 줄: navigator.clipboard.writeText("potatoes");

이제 클립보드에 무언가를 복사하는 작업을 한 줄로 수행할 수 있습니다.
Clipboard API이 이를 지원합니다.
여기에는 많은 비동기 메서드가 있습니다. 즉, 약속을 반환한다는 의미입니다.
약속이 해결? 깔끔한, 나중에 일을.

이 예제 React 구성 요소는 writeText 메서드를 사용하여 문자열을 클립보드에 복사합니다.

import { useState } from "react";

const CopyDemo = () => {
  const text = "Boil em, mash em, stick em in a stew.";
  const [copied, setCopied] = useState(false);
  const copy = async () => {
    await navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 1000);
  };
  return (
    <div>
      <p>{text}</p>
      <button onClick={copy}>{copied ? "Copied" : "Copy"}</button>
    </div>
  );
};

바닐라 JS를 선호한다면 my copy button codepen을 확인하십시오.

복사 버튼을 클릭하면 BAM, Samwise Gamgee의 지혜의 말이 이제 클립보드에 있습니다.

While writing to the clipboard can always be done in the active tab using the Clipboard API, reading the clipboard needs to be permitted.

As with many modern APIs, navigator.clipboard is only available on HTTPS pages.

Optional chaining (?. syntax) can not be used on things like window or navigator.
I would have liked to use it, to prevent errors when rendering on the server without a window, but, alas.

브라우저 지원

Internet Explorer를 제외하고 all major browsers browsers에서 사용할 수 있습니다.

자체 주요 제품 중 일부는 Microsoftending Internet Explorer support와 함께.
그리고 2021년에 더 이상 사용하지 않을 계획이므로 clipboard API에 대한 지원이 부족한 Internet Explorer에 대해 걱정하지 않습니다.

Update: It's official.
IE support has ended on June 15, 2022

Clipboard API은 document.execCommand()를 통해 클립보드에 액세스하는 이전 방식을 대체하기 위한 것입니다.
execCommand() is deprecated , 호환성 목적으로만 사용됩니다.