JavaScript 클립보드 복사 (샘플 코드)

HTML 요소의 텍스트를 클립보드에 복사하는 JavaScript 샘플 코드가 있습니다. 'document.execCommand(), Clipboard API, clipboard.js 라이브러리' 이 3가지 방법을 소개합니다.

document.execCommand()는 옛날부터 계속 사용되어 온 방법이고, Clipboard API는 document.execCommand()를 대체하기 위해서 새로 나온 방법입니다. 그리고 clipboard.js 라이브러리는 오래된 유지보수 이력을 볼때 믿음이 가는 라이브러리 같습니다. 본문 내용을 확인하고 어떤 방법으로 구현할 지 고려해 보세요.

목차

• document.execCommand()로 <textarea> 또는 <input>의 텍스트를 클립보드에 복사
• document.execCommand()로 <div> 또는 <span>의 텍스트를 클립보드에 복사
• NEW! Clipboard API로 HTML 요소의 텍스트를 클립보드에 복사
• clipboard.js 라이브러리를 사용해서 클립보드에 복사
• More Info 클립보드란?

document.execCommand()로 <textarea> 또는 <input>의 텍스트를 클립보드에 복사

[샘플 코드]

[코드 설명]

위 소스 코드에서의 핵심은 32행과 34행입니다. 32행에서의 HTMLInputElement.select() 함수는 <textarea> 요소 또는 <input> 요소 안에 있는 모든 텍스트 콘텐츠를 선택합니다. 그리고 34행에서의 document.execCommand('copy')는 예전부터 클립보드에 복사하는 기능을 구현하는데 필수 코드였습니다. 하지만 최근에 업데이트된 문서를 확인해보니 document.execCommand() 기능은 앞으로 없어질 것이기 때문에 사용하지 않도록 권장하고 있었습니다. 현재까지는 가장 많이 사용되어 온 방법이라 짚고 넘어가고자 이 글(본 페이지)에 포함했습니다.

[실행 결과]

[테스트 텍스트] 안녕하세요^^ 저를 복사해 주세요.

document.execCommand()로 <div> 또는 <span>의 텍스트를 클립보드에 복사

[샘플 코드]

[코드 설명]

이 방법(※코드 설명을 읽어보세요)의 응용입니다. HTMLInputElement.select() 함수는 <textarea>와 <input> 요소에서만 호출이 가능하기 때문에 <textarea>를 생성해서 일시적으로 사용하고 제거합니다. 39행에서 Document.body 노드에서 제거된 <textarea> 요소는 메모리에서 자동으로 삭제됩니다. <textarea>가 화면의 아래 쪽에 순식간에 생겼다가 사라지는데 다행히 사람의 눈으로는 확인할 수 없습니다. 참고로 select() 실행 전에 focus()를 호출하는 것이 만약의 버그를 줄이는 한가지 방법이지만 의도하지 않은 곳으로 스크롤되는 현상때문에 빼 버렸습니다.

[실행 결과]

[테스트 텍스트]
안녕(^_^)
나를 복사해 줘.

테스트 텍스트(^-^)

NEW! Clipboard API로 HTML 요소의 텍스트를 클립보드에 복사

[샘플 코드]

[코드 설명]

'document.execCommand()로 클립보드에 접근하는 방식은 이제 그만!' 이게 Clipboard API를 제공하는 이유인 것 같습니다.

클립보드에 텍스트를 쓸 경우에는 이렇게 ↓↓↓

navigator.clipboard.writeText('안녕, 클립보드 API!').then(() => console.log('쓰기 성공!'));

클립보드에 쓰여진 텍스트를 읽을 경우에는 이렇게 ↓↓↓

navigator.clipboard.readText().then(text => console.log(text));

간단하고 깔끔해서 좋네요. 처음에는 브라우저 호환성 문제가 컸는데 시간이 흐른 현재에는 IE(인터넷 익스플로러)를 제외한다면 문제없을 것으로 보입니다. 이제는 IE를 배제하고 개발해도 괜찮지 않을까요? Clipboard API로 클립보드에 복사하는 이 방법을 추천합니다.

[실행 결과]

[클립보드 API 테스트] 반갑습니다*^^* 저를 복사하세요!

[클립보드 API 테스트]
반가워^^//
나를 복사해 줄래?

클립보드 API 테스트^///^

clipboard.js 라이브러리를 사용해서 클립보드에 복사

[샘플 코드]

[사용 방법 및 참고 사항]

clipboard.js는 클립보드 관련 유용한 기능을 제공하는 라이브러리입니다.

사용 방법은 본 페이지의 샘플 코드와 실행 결과를 참고하거나, 좀더 구체적이고 심화된 내용을 확인하려면 clipboard.js 홈페이지(https://clipboardjs.com)에 접속하세요.

참고로 이 라이브러리는 Selection(window.getSelection()의 리턴 객체)과 Document.execCommand() API에 의존하고 있으며 clipboard.js(v2.0.6)의 크기는 minified 버전이 약 10KB이고 gzipped 버전이 약 3KB입니다.

[실행 결과]

Hello, clipboard.js! I am from textarea :-)

Hello, clipboard.js! I am from div =)

More Info 클립보드란?

문구점에 있고, 윗 부분에 집게 같은 게 붙어 있어서 얇은 문서를 끼워 고정하는데 사용하는 그 클립보드에 잠시 문서를 끼워서 보고 나중에 다른 문서로 갈아 끼워 본 경험이 있나요?

컴퓨터 분야에서의 클립보드는

컴퓨터 사용자가 텍스트(또는 이미지)를 복사(또는 잘라내기)하면, 그 텍스트를 일시적으로 저장하는 곳입니다. 가령 컴퓨터 사용자가 또다시 텍스트를 복사하는 행위를 하면 클립보드에서 첫 번째 복사한 텍스트는 삭제되고 클립보드에 두 번째 복사한 텍스트가 저장됩니다.

평소에 PC나 휴대폰을 사용하다 보면 대부분의 사용자는 의식하지 못하지만 클립보드를 사용하게 됩니다. 예를 들어 브라우저에서 웹 서핑을 하다가 필요한 텍스트 정보를 발견하고 메모장 프로그램에 기록하기 위해서 하는 복사와 붙여넣기 기능은 클립보드를 사용합니다. 서로 다른 프로그램 간의 데이터 이동이 가능한 것은 너무나 당연하게 여겨지지만 클립보드가 없으면 불가능합니다. 참고로 화면을 캡처하는 Print Screen 키도 클립보드를 사용합니다.