먼저 클립보드(Clipboad)란,
'복사'하거나 '잘라내기'한 텍스트 또는 파일 등을 '붙여넣기' 하기 전까지 임시로 저장해두는 공간입니다.
자바스크립트 클립보드 복사하는 방법에는 document.exeCommand() 함수를 사용하는 방법과 Clipboard API를 사용하는 방법, clipboad.js 라이브러리를 사용하는 방법이 있는데요.
document.execCommand() 함수의 경우 (2022년 6월) 현재 정상적으로 동작은 하지만 웹 표준에서 Deprecated 되었기 때문에 공식문서에서도 사용되지 않으며, 대체 방법으로 Clipboad API 사용이 권장되고 있습니다.
하지만 Clipboad API의 경우 Safari 13.1 버전부터 https 환경에서만 지원한다는 아쉬운 점이 있는데요.
다른 방법으로는 clipboard.js 라이브러리를 사용하는 방법도 있는데, 해당 방법은 외부 라이브러리를 사용해야 한다는 점을 고려해야 되기 때문에 결국 개발하는 환경에 적합한 기능을 사용하는 것이 가장 좋을 것 같습니다.
1. document.execCommand() 사용 예시
<head>
<script>
function copyToClipBoard() {
var content = document.getElementById('textArea');
content.select();
document.execCommand('copy');
}
</script>
</head>
<body>
<textarea id="textArea">JavaScript 클립보드 복사하는 방법(Clipboard API, clipboad.js)</textarea>
<button onclick="copyToClipBoard()">Copy</button>
</body>document.execCommand()는 Deprecated 되기 전까지 가장 보편적으로 사용되던 클립보드 복사 방식입니다.
execCommand('copy')를 사용하여 텍스트를 클립보드에 복사할 수 있고, execCommand('cut')을 사용하여 텍스트를 잘라내서 클립보드에 추가할 수 있으며, execCommand('paste')를 사용해서 클립보드에 있는 내용을 붙여넣기 할 수 있습니다.
HTMLInputElement.select()는 <input> 또는 <textarea>의 모든 텍스트를 선택하는 함수입니다.
복사할 문자는 반드시 selection이 가능한 입력 필드(<input>, <textarea>)여야 하며, 값이 숨겨진 상태(type="hidden")가 아니여야 합니다.
<script>
function copyToClipBoard() {
var content = document.getElementById('textArea');
content.select();
content.setSelectionRange(0, 99999); // 모바일 브라우저(ios)에서의 동작을 위한 추가코드
document.execCommand('copy');
content.setSelectionRange(0, 0); // 모바일 브라우저(ios)에서의 동작을 위한 추가코드
}
</script>추가로 모바일에서 작동이 되지 않는 경우, 해당 예시처럼 setSelectionRange() 부분을 추가해주면 모바일에서도 정상적으로 작동하게 됩니다.
2. Clipboad API 사용 예시
<head>
<script>
function copyToClipBoard(){
var content = document.getElementById('textArea').innerHTML;
navigator.clipboard.writeText(content)
.then(() => {
console.log("Text copied to clipboard...")
})
.catch(err => {
console.log('Something went wrong', err);
})
}
</script>
</head>
<body>
<textarea id="textArea">JavaScript 클립보드 복사하는 방법(Clipboard API, clipboad.js)</textarea>
<button onclick="copyToClipBoard()">Copy</button>
</body>Clipboard API는 document.execCommand()가 Deprecated 되면서 대체하기 위해 나왔습니다.
여기서는 .innerHTML 속성을 통해 <textarea> 내부에 있는 텍스트를 가져오고, 해당 텍스트를 content에 저장합니다.
복사 기능에서는 navigator.clipboard.writeText() 함수를 사용하고, 붙여넣기 기능에서는 navigator.clipboard.readText() 함수를 사용합니다.
(Clipboard API는 위에서 언급한 것처럼 Safari 13.1 버전부터 https 환경에서만 지원되기 때문에 인증서가 설치되지 않은 사이트의 경우 사용하기 적합하지 않을 수도 있습니다.)
3. clipboard.js
clipboard.js
A modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzipped
clipboardjs.com
clipboard.js 공식 홈페이지입니다.
해당 라이브러리를 사용하기 위해서는 다운로드해서 직접 프로젝트에 넣고 사용하는 방법, npm을 통해 설치해서 사용하는 방법, CDN 방식으로 사용하는 방법 등이 있는데, 아래 예시에서는 CDN을 통한 방법을 사용하였습니다.
<body>
<textarea id="textArea">ccc JavaScript 클립보드 복사하는 방법(Clipboard API, clipboad.js)</textarea>
<button class="btn" data-clipboard-target="#textArea">Copy</button>
<!-- clipboard.js cdn 추가 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
<!-- 라이브러리 실행 -->
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>clipboard.js의 기본적인 사용 방법은 크게 두 가지가 있는데요.
첫 번째 방법은 <button>의 data-clipboard-target 속성 값으로 복사될 텍스트가 있는 <input> 또는 <textArea>의 id를 입력해주는 방법입니다. (이때 <button>의 속성으로 data-clipboard-action 속성으로 cut을 넣어주게 되면 잘라내기를 수행하게 됩니다.)
두 번째 방법으로는 <input> 또는 <textArea>가 없는 경우 <button>의 data-clipboard-text에 복사될 텍스트를 직접 넣어주는 방법이 있습니다.
< 참고 자료 >
JavaScript에서 클립 보드에 텍스트 복사
이 기사에서는 JavaScript에서 텍스트를 클립 보드에 복사하는 방법을 소개합니다.
www.delftstack.com
clipboard.js - 클립보드로 복사하기
웹 페이지 개발 중 페이지 내 텍스트를 클립보드로 복사하는 기능이 필요할 때, 간단히 가져다 쓸 수 있는 라이브러리를 소개합니다. 추억을 거슬러 가보면... 웹 초창기엔 플래시를 쓰기도 했고
alikong.tistory.com
'Programming > Javascript' 카테고리의 다른 글
| (javascript) input image width, height 이미지 너비, 높이 구하기 (0) | 2023.01.19 |
|---|---|
| Javascript 테이블 행의 값 가져오는 방법(table.rows / row.cells) (0) | 2022.10.19 |
| Javascript Cookie 쿠키 저장, 가져오기, 삭제 함수 (0) | 2022.06.03 |
| 구글맵 google map API 사용법 및 marker 추가, 변경하는 법 (JavaScript) (0) | 2022.02.26 |
| 비동기 통신 Ajax 개념 (Asynchronous Javascript And Xml) (0) | 2021.08.26 |