[Javascript] 간단한 링크 주소 복사 버튼 만들기

 

728x90

이벤트 등을 할 때 링크 주소 공유 기능을 만들어야 하는 경우가 있는데

스크립트를 길게 쓰지 못하는 경우에 사용하려고 저장한 방법이다.

 

 

만약 이미지를 클릭했을 때, 지금 현재 url이 복사되도록 하고 싶다면 아래 함수를 <script></script> 사이에 넣고 <img src="" onclick="clip()" >을 써주면 해결된다.

만약 특정 url을 복사하게 하려면 아래 함수의 url = "window.location.href" 에 원하는 url을 넣으면 된다.  

 

 

function clip(){
   var url = '';
   var textarea = document.createElement("textarea");
   document.body.appendChild(textarea);
   url = 'window.location.href';
   textarea.value = url;
   textarea.select();
   document.execCommand("copy");
   document.body.removeChild(textarea);
   alert("링크가 복사되었습니다. 필요하신 곳에 붙여넣기 하세요!")
};

 

 

document.execCommand는 2021년 현재 표준에서 빠진 메소드라서 clipboard.js 같은 라이브러리나 Navigation을 이용해야 하는데 내 경우에는 카페24 게시판에서 돌아갈 스크립트 한 줄이 필요한거라 이 함수를 참조했다.

 

 

Document.execCommand() - Web API | MDN

 

 

현재 execCommand를 대체할 API는 Navigation.Clipboard이고 아래와 같이 사용한다.

 

 

Clipboard API - Web API | MDN

 

---

 

INPUT 태그에 작성한 텍스트 복사하기

 

 

HTML

 

 <div>
   <input type="text" class="copy-value"></input>
   <button onclick="copyText()">눌러서 복사</button>
 </div>

 

JS

클립보드에 선택한 부분을 '쓰는' 단계

 

//input 태그 선택자로 선택
let inputTag = document.querySelector(".copy-value");
        
function copyText(){ 
  //inputTag라는 변수에 담긴 input 태그의 value(텍스트)를 클립보드에 쓰기
  navigator.clipboard.writeText(inputTag.value).then(res=>{
  	alert("텍스트가 복사되었습니다!");
  })
}

 

미리보기

 

 

현재 화면의 url을 복사하기

 

 

HTML

 

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

 

JS

 

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

function copyUrl(){ 
  //nowUrl 변수에 담긴 주소를
  	navigator.clipboard.writeText(nowUrl).then(res=>{
	  alert("주소가 복사되었습니다!");
	})
}

 

미리보기

 

 

 

 

 

 

 

이렇게 만들 수 있다.