기존에 텍스트 복사를 구현하려면
document.execCommand("copy") 을 이용했다.
아래 글 참고
[자바스크립트] 텍스트 클립보드 복사(copy)/붙여넣기 기능 구현 방법
그러나 execCommand 메서드는 Deprecated 되었으며,
대안으로 훨씬 쉽고 강력한 Clipboard API 가 나왔다.
window.navigator.clipboard.writeText() 메서드를 사용하면,
아주 쉽게 텍스트를 클립보드에 복사해둘 수 있다.
너무나 쉽고 좋아서 정리해두지 않을 수 없다.
1. 텍스트 복사
- navigator.clipboard.writeText("복사할 텍스트") 호출하면 끝!
- 비동기로 복사를 수행하고 Promise 를 반환하므로, 복사가 완료되었을 때 수행할 작업을 then의 콜백함수로 넘어주면 된다.
// writeText()의 인자로 넣은 텍스트가 복사된다.
window.navigator.clipboard.writeText("복사될 텍스트").then(() => {
// 복사가 완료되면 이 부분이 호출된다.
alert("복사 완료!");
});- 이런 방식으로 URL 복사/공유 기능을 아주 쉽게 구현할 수 있을 것 같다.
2. HTML 엘리먼트의 내용 복사
- input이나 textarea 등의 내용을 value 속성으로 취득한 다음, writeText() 의 인자로 넣어 호출해주면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>복사</title>
</head>
<body>
<!-- textarea와 button 생성 -->
<textarea id="myTextarea"></textarea>
<button id="myButton">복사</button>
</body>
<script>
// $textarea
const myTextarea = document.getElementById("myTextarea");
// button 클릭 이벤트
document.getElementById("myButton").onclick = () => {
// textarea의 내용을 복사한다.
window.navigator.clipboard.writeText(myTextarea.value).then(() => {
// 복사가 완료되면 호출된다.
alert("복사완료");
});
};
</script>
</html>
<실행 화면>
- 글을 입력하고 "복사" 버튼을 누르면, 입력한 내용이 복사된다.
3. 일반 HTML 태그의 내용 복사
- div 등의 내용도 textContent 등으로 취득해서 복사하면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>복사</title>
</head>
<body>
<!-- div와 button 생성 -->
<div id="myDiv">div의 내용입니다.</div>
<button id="myButton">복사</button>
</body>
<script>
// div 취득
const myDiv = document.getElementById("myDiv");
// button 클릭 이벤트
document.getElementById("myButton").onclick = () => {
// div의 내용(textContent)을 복사한다.
window.navigator.clipboard.writeText(myDiv.textContent).then(() => {
// 복사가 완료되면 호출된다.
alert("복사완료");
});
};
</script>
</html>
실행화면은 생략.
단순히 텍스트 뿐만 아니라, img 등의 html 엘리먼트를 내용을 다룰 수 있는
read(), write() 등의 메서드도 제공된다고 한다.
자세한 내용은 레퍼런스를 참고하자.
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
※ 주의 사항
clipboard API 는 localhost나 https 환경에서만 동작한다.
MDN 상에서도 https 에서만 가능한 기능이라고 명시되어 있다.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
만약 서버에 배포했는데, https가 아닌 http라면 아래와 같은 에러코드를 만나게 된다.
Uncaught TypeError: Cannot read properties of undefined (reading 'writeText')
정석적인 해결 방법은 https로 서비스하는 것 이지만,
여의치 않다면, execCommand('copy')를 사용할 수 밖에 없지 않나 싶다.
execCommand가 deprecated되어 권장하긴 어렵지만, 아래와 같은 코드로 기능 구현 자체는 가능할 것이다.
// 텍스트 복사 기능 구현
function copyText() {
// clipboard API 사용
if (navigator.clipboard !== undefined) {
navigator.clipboard
.writeText(`복사할 텍스트`)
.then(() => {
alert('텍스트가 복사되었습니다.');
});
} else {
// execCommand 사용
const textArea = document.createElement('textarea');
textArea.value = `복사할 텍스트`;
document.body.appendChild(textArea);
textArea.select();
textArea.setSelectionRange(0, 99999);
try {
document.execCommand('copy');
} catch (err) {
console.error('복사 실패', err);
}
textArea.setSelectionRange(0, 0);
document.body.removeChild(textArea);
alert('텍스트가 복사되었습니다.');
}
};
execCommand에 대한 더 자세한 내용은 아래 글을 참고.
[자바스크립트] 텍스트 클립보드 복사(copy)/붙여넣기 기능 구현 방법
'개발(Development) > JS(자바스크립트)' 카테고리의 다른 글
| [Puppeteer] M1 맥북 Chromium Error: Failed to launch the browser process 해결 방법 (0) | 2022.08.25 |
|---|---|
| [TypeScript] enum 기초 사용법 (+ enum이 필요한 이유) (0) | 2022.08.18 |
| [Node.js] Multer - fetch 파일 전송 에러: Error: Multipart: Boundary not found (0) | 2022.05.14 |
| [Node.js] Multer 파일 업로드 관련 에러: MulterError: Unexpected field (0) | 2022.05.14 |
| 자바스크립트 File API 파헤치기: Blob, File, FileReader, FileList, BlobURL (0) | 2021.12.01 |
댓글