자바스크립트를 사용하여 클립보드에 복사하는 방법을 알아봅니다.


! 클립보드(Clipboard)에 복사하기란?
브라우저에서 텍스트 등을 복사하면 붙여넣기가 가능하죠 ~ 이때 복사한 텍스트는 클립보드(Clipboard)라는 영역에 복사하게 됩니다.

웹브라우저의 클립보드는 자바스크립트를 사용하여 컨트롤이 가능합니다. 이 방법을 사용하면 복사하기위한 Ctrl + C를 방문자가 직접 누르지 않아도 특정 콘텐츠를 복사한 것과 동일한 기능을 구현할 수 있습니다. 그럼 방문자는 Ctrl + V만으로 붙여넣기가 가능하겠죠~

그럼  구현 방법과 예제를 아래에서 자세히 알아봅니다.



# 자바스크립트를 사용하여 클립보드 영역에 복사하는 방법 및 예제
그럼 어떻게 클립보드 복사하기를 구현하려면 어떤 방법이 필요한지 알아야겠죠. 먼저 아래의 태그를 봐주세요.

보시면 input 태그가 있습니다. 내부에 인라인 방식의 스크립트 코드가 있죠. alert()은 복사가 되었음을 알리므로 나머지 코드를 알아봅니다.

여기서 this.select()는 input 태그를 선택해 내부의 텍스트 영역을 드래그한 효과가 나타납니다.
다음으로 실행되는 document.execCommand('copy')가 바로 선택된 영역을 복사하는 방법입니다. 

document.execCommand('copy')
// 클립보드에 선택 영역을 복사하여 저장하기


즉 선택된 영역이 클립보드 영역에 저장됩니다. 여기서 한가지 중요한 사실이 있습니다.


! 클립보드는 input, textarea 등의 입력폼에 사용할 것
네 ~ 바로 클립보드를 사용하려면 바로 <textarea>, <input> 등의 입력 태그에만 사용 가능하다는 점입니다. 이 외의 div, span등은 동작 안하므로 꼭 알아두세요 ~ 다시 한 번 설명하면 ~

• this.copy() // 해당 엘리먼트의 content를 선택함
• document.execCommand('copy'); // 선택된 content를 clipboard 영역에 복사함
  

손쉽게 Ctrl + v 를 사용하여 붙여넣기가 가능합니다. 아래의 예제에서 직접 클릭 후 테스트해보세요.

@ 지원하는 브라우저는?
대부분의 브라우저에서 지원하며 IE는 10부터 지원합니다.



# (고급) 자바스크립트의 클립보드 활용하기
클립보드를 활용하는 방법은 다양합니다. 예를들어 이메일 주소나 사이트 정보 등을 방문자에게 쉽게 전달, 공유하기 위해서 클립보드에 자동으로 복사할 수 있는 버튼을 제공할 수 있죠. 웹페이지 주소 등을 클립보드를 사용해 더 빨리 공유할 수 있겠습니다.

? input, textarea 태그가 아닌 경우 클립보드 사용하는 방법은

만약 클립보드에 복사할 텍스트가 input이나, textarea 태그가 아니라면 어떻게 할까요? 이때는 임시로 input 등의 태그를 만들어 클립보드에 복사 후 만들었던 input 태그를 지우는 방법으로 가능합니다. 순서대로 나열하면...

1. 복사할 텍스트를 변수에 저장한다 Ex) 'webisfree.com'
2. 임시로 input 태그를 만든다.
3. 2의 input 태그에 1의 변수값 'webisfree.com'을 입력한다.
4. 2의 태그에 select()를 적용한다.
5. 2의 태그를 body 등의 웹페이지 태그에 appendChild() 등으로 추가한다.
6. document.execCommand('copy')를 사용하여 클립보드 영역에 복사한다.
7. 사용이 완료된 2의 태그는 삭제한다. removeChild() 등을 사용

이와 같은 방법으로 클립보드 복사를 간단하게 구현할 수 있겠습니다.


! 클립보드 영역 복사를 실제로 잘 동작하는지 확인해보기
아래의 버튼은 위 예제와 동일합니다. input 태그 영역을 클릭하여 복사가 되었는지 알아보세요.

여기를 클릭!!

이제 아래의 textarea에 붙여넣기 Ctrl + v를 눌러보세요. 잘 복사되었다면 webisfee.com이 나타나게 됩니다.