[Vue/Javascript] Vue에서 링크 복사 버튼 기능 구현 하기

exeCommand("copy")를 이용한 복사 구현

이벤트 페이지 혹은 사용자가 공유를 하기 위해서는 해당 주소를 복사해야 되는 경우가 있다.

주소창은 전체 선택해서 복사를 하는 것도 가능하나, 

모바일 화면상에서는 직접 주소창을 복사하는 것도 귀찮기도 해서

요즘은 링크 복사 가능한 버튼을 만들어서 제공한다.

 

🧐JAVASCRIPT 링크 복사 예시 코드

HTML

<input type="hidden" id="urlInput" class="url-input"/>
<button @click="copyjavascriptUrl" class="url-copy-btn">복사하기</button>

Javascript

copyUrl () {
    //url 넣을 input 생성
	const urlInput = document.getElementById("urlInput");
    
    //현재 URL 가져오기
    urlInput.value = window.document.location.href;
    
    //clipboard 복사
    urlInput.select();
    document.execCommand("copy");
    urlInput.eventUrlInput.blur();
}

 

📃document.execCommand("copy")

document.execCommand("copy"); 명령어를 이용하면 해당 input에 있는 URL을 복사하는 것이 가능하다.

이 기능을 이용하면 url 복사 외에도 다양한 곳에 활용이 가능하다.

 

🧨document.execCommand("copy") 사용 시 주의사항

input type을 hidden으로 지정할 경우 복사 기능이 제대로 작성하지 않는다.

css 상 display:none으로 지정해도 되지 않는다.

input은 type은 text로 지정하고, 만약 보이고 싶지 않을 경우는 css opacity값을 이용해서 조정하면 된다.