JavaScript로 간단하게 클립보드에 URL 복사하는 방법

클립보드에 URL 복사

웹 페이지의 URL을 쉽게 복사하고 싶으신가요? 오늘은 JavaScript를 사용하여 현재 페이지의 URL을 클립보드에 복사하는 간단한 함수를 만들어 보겠습니다. 이 함수는 사용자가 원하는 곳에 URL을 쉽게 붙여넣을 수 있도록 도와줍니다.

함수 설명

아래는 우리가 구현할 clip 함수 입니다.

function clip() {
   var url = '';
   var textarea = document.createElement("textarea");
   document.body.appendChild(textarea);
   url = window.location.href; // 현재 URL을 가져옵니다.
   textarea.value = url;
   textarea.select(); // 텍스트 영역의 내용을 선택합니다.
   document.execCommand("copy"); // 선택된 내용을 클립보드에 복사합니다.
   document.body.removeChild(textarea); // 텍스트 영역을 제거합니다.
   alert("링크가 복사되었습니다. 필요하신 곳에 붙여넣기 하세요!");
}

코드 분석

1. 텍스트 영역 생성: document.createElement("textarea")를 사용하여 텍스트 영역을 생성합니다. 이 영역은 클립보드에 복사할 내용을 담는 역할을 합니다.
2. 현재 URL 가져오기: window.location.href를 사용하여 현재 페이지의 URL을 가져옵니다.
3. 값 설정 및 선택: 텍스트 영역의 값을 URL로 설정하고, textarea.select()를 통해 해당 내용을 선택합니다.
4. 클립보드에 복사: document.execCommand("copy")를 사용하여 선택된 내용을 클립보드에 복사합니다.
5. 텍스트 영역 제거: 작업이 끝난 후에는 생성한 텍스트 영역을 DOM에서 제거합니다.
6. 알림 표시: URL 복사가 완료되면 사용자에게 알림을 표시합니다.

함수 응용방법

입력 필드의 텍스트를 복사하기

아래 코드는 사용자가 입력한 텍스트를 클립보드에 복사하는 기능을 구현합니다.

HTML 코드

<div>
   <input type="text" class="copy-value" placeholder="복사할 텍스트를 입력하세요." />
   <button onclick="copyText()">입력필드 복사</button>
</div>

JavaScript 코드

// input 태그 선택자로 선택
  let inputTag = document.querySelector(".copy-value");

  function copyText() { 
      // inputTag라는 변수에 담긴 input 태그의 value(텍스트)를 클립보드에 씁니다.
      navigator.clipboard.writeText(inputTag.value).then(res => {
          alert("텍스트가 복사되었습니다!");
      }).catch(err => {
          alert("복사에 실패했습니다.");
      });
}

설명

1. HTML 구조: input 태그와 button을 사용하여 사용자가 텍스트를 입력하고 복사할 수 있도록 합니다.
2. JavaScript:
   • document.querySelector를 사용하여 .copy-value 클래스가 있는 input 요소를 선택합니다.
   • navigator.clipboard.writeText 메서드를 사용하여 입력된 텍스트를 클립보드에 복사합니다.
   • 복사가 성공하면 알림을 표시합니다. 실패할 경우 실패 메시지를 표시합니다.

예시: 적용된 모습

현재 화면의 URL 복사 하는 방법

아래 코드는 현재 페이지의 URL을 클립보드에 복사는 기능을 구현합니다.

HTML 코드

<div>
    <button type="button" class="copy-btn" onclick="copyUrl()" aria-label="링크 복사하기">링크 복사</button>
</div>

JavaScript 코드

// 현재 URL 변수로 가져오기
let nowUrl = window.location.href;

function copyUrl() { 
    // nowUrl 변수에 담긴 주소를 클립보드에 씁니다.
    navigator.clipboard.writeText(nowUrl)
        .then(() => {
            alert("주소가 복사되었습니다!"); // 성공 시 알림
        })
        .catch(err => {
            console.error("복사 실패:", err); // 콘솔에 오류 로그
            alert("복사에 실패했습니다."); // 실패 시 알림
        });
}

설명

1. HTML 구조: button을 사용하여 사용자가 현재 URL을 복사할 수 있도록 합니다.
2. JavaScript:
   • window.location.href를 사용하여 현재 페이지의 URL을 가져옵니다.
   • navigator.clipboard.writeText 메서드를 사용하여 URL을 클립보드에 복사합니다.
   • 복사가 성공하면 알림을 표시하고, 실패할 경우 실패 메시지를 표시합니다.

예시: 적용된 모습

마무리

JavaScript를 사용하여 클립보드에 URL을 복사하는 것은 매우 유용한 기능입니다. 위의 clip 함수를 활용하면 사용자 경험을 향상시키고, 웹 애플리케이션의 활용도를 높일 수 있습니다. 간단한 코드로 큰 편리함을 제공하는 이 기능을 여러분의 프로젝트에 적용해 보세요