[JavaScript] URL 주소 복사하기(.select(), copy)

안녕하세요! Plitche(플리체)입니다.
이번 포스팅의 주제는 [JavaScript] URL 주소 복사하기(.select(), copy) 입니다.

Intro

현재 프로젝트 업무를 진행하면서 이벤트 페이지를 개발하고 있다.

그 중 몇 이벤트에서 카카오톡 공유하기와 URL 복사 버튼을 구현하였다.

개발함에 있어 생각보다 더 많이 고민하고 찾아보았던 URL 복사하기 기능에 대해서 설명하고자 한다.

라이브러리를 이용한 방법도 있지만 오늘은 javascript를 이용한 간단한 방식에 대해 알아보자.

---

1. Select (선택할 url 드레그)

먼저 html태그를 아래와 같이 작성해준다.

<input type="text" id="text" />
<input type="button" onclick="fn_select()" value="Select(선택)" />

 

버튼을 클릭했을때 element.select(); 를 통하여 input 태그에 작성된 내용을 선택한다. (MDN 참고)

<script>
    function fn_select() {
    var url = document.getElementById('text'); // 선택자를 이용하여 해당 입력태그를 선택하고
    url.select(); // select() 메소드를 호출한다.
    }
</script>

 

 

 

> 여기서 select() 메소드는 input나 textarea같은 입력태그에서만 가능하다.

---

2. Copy (드레그된 url 복사)

document.execCommand('copy') 를 통하여 선택된 text를 클립보드에 복사한다.

<input type="text" id="text" value="https://plitche.github.io"/>
<input type="button" onclick="fn_copy()" value="Copy(복사)"/>

<script>
    function fn_copy() {
    var url = document.getElementById('text');
    url.select();    // 복사할 text 블럭
    document.execCommand('copy');    // 드레그된 text 클립보드에 복사
    }
</script>

 

 

---

3. Notice (주의)

• 위에 설명한 것처럼 document.execCommand('copy')는 드레그된 text를 복사한다.

그럼 <input type="hidden"/>이나 스타일을 통해서 display:none, visibility:none처리를 했다면 어떨까?

정답은! 당연히 안된다! 드레그(block) 자체가 안되기 때문이다.

---

4. Utilize (활용하기)

• 그럼 input태그나 textarea태그를 무조건 노출 시켜야 하는 걸까? 복사하게 해주려는 태그 및 url을 화면에 보여주지 않고 버튼만 남길수는 없을까?

위와 같은 질문에 대한 해답은 마찬가지로 '당연히 가능한 방법이 있다!' 이다.

아래와 같이 style css를 통해서 view단에서 input 태그를 먼저 숨겨둔다.

<input type="text" id="text" value="https://plitche.tistory.com" style="display: none;"/>
<input type="button" onclick="fn_final()" value="URL 복사"/>

 

그리고 버튼을 누르는 순간 숨겨두었던 input태그를 보여주고 클립보드에 복사하자마자 다시 숨기는 것이다.

<script>
    function fn_final() {
    var url = document.getElementById('text');
    url.style.display='block';    // 숨겨둔 input 태그 block처리
    url.select();    // 복사할 text 블럭
    document.execCommand('copy');    // 드레그된 text 클립보드에 복사
    url.style.display='none';    // 다시 숨기기
    }
</script>

 

 

---

review

• 모든 개념들은 확실히 아는 것을 어떻게 조합하고 활용하여 기능을 구현하는 데 있는 것 같습니다.
• 알고나면 간단한 부분을 나 혼자 스스로 생각해내기는 어려울 수 있습니다. 꾸준히 연습하자구요!^^ 감사합니다.