JavaScript를 사용하여 텍스트를 클립보드에 복사하는 방법(코드 5줄)?

my blog에 원래 게시됨

개발자로서 우리는 코드 블록 옆에 "복사"버튼이 있는 것이 얼마나 유용하고 좋은지 알고 있습니다. 경우에 따라 웹 사이트의 사용성을 높이는 데 많은 도움이 됩니다.

이 게시물에서는 JavaScript 몇 줄만으로 텍스트를 클립보드에 복사할 수 있도록 만들 것입니다.

마크업

이 게시물을 빠르고 쉽게 소화할 수 있도록 Tailwind CSS을 사용하여 앱의 스타일을 지정하고 모든 것이 멋지게 보이도록 하겠습니다.

따라서 HTML 부분의 경우 매우 간단합니다(Tailwind CSS에 의해 추가된 여러 클래스 제외).

<main class="flex flex-col h-screen justify-center items-center bg-gray-100">
  <div class="bg-white max-w-sm p-5 rounded shadow-md mb-3">
    <input
      class="border-blue-500 border-solid border rounded py-2 px-4"
      type="text"
      placeholder="Enter some text"
      id="copyMe"
    />
    <button
      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded"
      onclick="copyMeOnClipboard()"
    >
      Copy
    </button>
  </div>
  <p class="text-green-700"></p>
</main>

여기에서 유지해야 할 3가지 중요한 사항이 있습니다.

입력 태그의 idcopyMe

버튼 태그

의 기능copyMeOnClipboard()

p 태그

idcopyMe는 사용자가 입력한 값에 액세스하는 데 도움이 됩니다. 그리고 그가 Copy 버튼을 클릭하면 copyMeOnClipboard() 메서드가 트리거되어 복사를 처리하고 JavaScript로 성공 메시지를 동적으로 표시합니다.

그렇게 말하면 이제 JS 파일로 이동하여 마지막 손질을 할 수 있습니다.

자바스크립트는 굉장하다

자바스크립트

물론 자바스크립트는 멋지다. 그리고 그 document 개체에는 몇 가지 매우 편리한 메서드가 있습니다.

const copyText = document.querySelector("#copyMe")
const showText = document.querySelector("p")

const copyMeOnClipboard = () => {
  copyText.select()
  copyText.setSelectionRange(0, 99999) // used for mobile phone
  document.execCommand("copy")
  showText.innerHTML = `${copyText.value} is copied`
  setTimeout(() => {
    showText.innerHTML = ""
  }, 1000)
}

여기에서 볼 수 있듯이 필요한 요소copyText 및 showText를 선택하여 시작합니다. 각각 입력 및 단락 태그입니다. 그런 다음 copyMeOnClipboard() 함수를 사용하여 논리를 처리합니다.
copyText 요소(입력 태그임을 기억하세요)는 select() 메서드에 대한 액세스를 제공하며 추측할 수 있듯이 입력 텍스트 필드의 콘텐츠를 선택합니다.

마지막으로 document.execCommand("copy")로 복사 명령을 실행하고 클립보드의 텍스트를 가져옵니다.

너무 쉬워



이제 완료했지만 사용자에게 성공 메시지를 표시하여 약간 개선할 수 있습니다. 이미 showText 요소가 있기 때문에 매우 쉽습니다. 우리가 해야 할 유일한 일은 innerHTML로 성공 메시지를 추가하고 setTimeout()로 1초 후에 제거하는 것입니다.

그리고 그게 전부입니다!

읽어주셔서 감사합니다.




BLOG
NEWSLETTER
GITHUB

CODEPEN