JS 사용자의 클립보드에 텍스트 복사

웹사이트를 프로그래밍할 때 사용자의 클립보드에 있는 텍스트를 복사해야 하는 경우가 종종 있습니다. 코드 조각, 토큰(GitHub와 같은), URL 또는 단순히 메시지를 복사하는 것입니다. 그렇기 때문에 이 기사에서는 라이브러리 없이 바닐라 자바스크립트로 사용자 클립보드의 텍스트를 복사하는 방법을 살펴보겠습니다.

어떤 방법을 사용해야 합니까?

이를 위해 javascript 함수를 사용할 수 있습니다: execCommand() . 그러나 MDN web docs에 따르면 이 기능은 곧 쓸모없게 되어 웹 표준에서 제거될 것입니다. 그렇기 때문에 이 자습서에서는 Clipboard.writeText()라는 다른 방법을 사용합니다.

이 함수의 구문은 매우 간단합니다.

let variable = navigator.clipboard.writeText(‘your text’);

먼저 입력 내용을 사용자의 클립보드에 복사하는 방법을 살펴보겠습니다. 그런 다음 사용자가 복사할 수 있는 여러 코드 조각이 있는 더 복잡한 예를 볼 수 있습니다.

간단한 예

이 예에서 사용자는 입력에 원하는 텍스트를 입력하고 이 목적을 위해 제공된 버튼을 클릭하여 포함된 텍스트를 복사할 수 있습니다. 모든 웹 프로젝트에서와 마찬가지로 첫 번째 단계는 HTML을 설정하는 것입니다. 우리의 경우 매우 간단합니다. 입력과 "복사"버튼입니다.

<input type="text" id="textInput" placeholder="Your text">
<button id="copy" content=""  onclick="copyText(event)" ></button>

미래의 JavaScript를 예상하여 사용자가 "복사"버튼을 클릭할 때 copyText() 함수를 호출합니다.

그런 다음 앞에서 언급한 함수를 사용하여 자바스크립트를 추가하기만 하면 됩니다.

// We select our input 
let input = document.getElementById("textInput");

// Copy the text of the input 
copyText = (e) => {
  // We check that the input is not empty 
  if (input.value.length) {
    // We copy the text it contains into the clipboard 
    navigator.clipboard.writeText(input.value).then(() => {
      // We confirm the action in the console 
      console.log("Text Copied !");
    })
  } else {
    console.log("The input is empty ");
  }
}

좀 더 예쁘게 보이도록 약간의 CSS를 추가하면 다음과 같은 결과가 나타납니다.



(일부 브라우저에서는 코드펜 미리보기에서 "복사"기능이 비활성화될 수 있습니다. 프로그램을 테스트하려면 "CodePen에서 편집"을 클릭하여 프로그램을 열어야 할 수 있습니다.)

조금 더 복잡한 예

약간 더 복잡한 두 번째 예제에서는 사용자의 "복사"버튼 클릭을 감지한 다음 버튼 번호 앞의 문자를 제거하여 버튼의 ID를 검색합니다. 그런 다음 해당 코드 블록의 텍스트를 가져옵니다. 그런 다음 다음 예에서와 같이 변수text의 내용을 사용자의 클립보드에 넣습니다.

조금 더 가면

하지만 그게 다가 아닙니다. clipboard에 대한 다른 방법이 있기 때문에 조금 더 나아갈 수 있습니다.

예를 들어 read() 메서드를 사용하면 텍스트가 아닌 경우에도 사용자의 클립보드 내용을 검색할 수 있습니다(허가가 있는 경우)

.

텍스트만 검색하려면 readText() 메서드를 사용합니다.

같은 방식으로 write() 방법으로 이미지를 복사할 수 있습니다.

마지막으로 이 자습서에서 사용한 방법: writeText()

이 튜토리얼이 마음에 드셨기를 바랍니다. 질문이 있으시면 언제든지 의견을 남겨주세요. 👍


당신은 나를 지원하고 싶어?



또는