티스토리 뷰

JavaScript

[Javascript] 클릭 시 복사 구현하기 / execCommand 대체

hiolivia 2022. 5. 6. 17:08

이전에는 자바스크립트로 클릭 시 복사되는 기능을 구현하기 위해 execCommand('copy') 메소드를 사용했지만 현재 MDN 문서에서는 deprecated된 메소드로 정의하고 있습니다.

이것을 대체할 수 있는 API와 라이브러리를 소개해보겠습니다.

 

1. Clipboard API

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Copy</title>
	</head>
	<body>
		<div id="text">Hi, I'm Olly!</div>
		<button onclick="copy()">copy!</button>
	</body>
	<script>
		async function copy() {
			let text = document.getElementById("text");
			try {
				await navigator.clipboard.writeText(text);
				console.log("Copied!");
			} catch (err) {
				console.error("Failed to copy: ", err);
			}
		}
	</script>
</html>

 

Clipboard API는 execCommand를 대체하기 위해 만들어졌습니다. 간단하게 복사 기능을 구현할 수 있지만 꼭 알아야 할 점은 https보안 설정이 되었거나 localhost에만 실행된다는 것입니다.

만약 http라면 두번째 방법을 보시면 됩니다.

 

2. clipboarad.js

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Copy</title>
	</head>
	<body>
		<div id="text">Hi, I'm Olly!</div>
        <!-- 방법1) 태그를 활용해 타켓 지정 -->
		<button data-clipboard-target="#text">Copy</button>
        <!-- 방법2) 복사할 문자 직접 입력 -->
		<button data-clipboard-text="Hi, I'm Olly!">copy2</button>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
	<script>
		var clipboard = new ClipboardJS("button");
		clipboard.on("success", function () {
			alert("Copied!");
		});
		clipboard.on("error", function () {
			alert("Failed");
		});
	</script>
</html>

cdn을 연결해주어야 하고, 태그로 타겟을 지정하거나 문자를 직접 입력하는 두가지 방법이 있습니다.

 

이 두가지 방법으로 클릭 시 복사 기능을 간단히 구현할 수 있었네요.😉

'JavaScript' 카테고리의 다른 글

[Javascript] url 파라미터 추출하기  (0) 2022.05.27
[Javascript] 시계(시,분,초) 구현하기  (0) 2022.05.23
[Javascript] async/await 사용하기  (0) 2022.05.02
[Javascript] Promise 프로미스 이해하기  (0) 2022.04.30
[Javascript] Class (ES6) 개념 및 예제  (0) 2022.04.26