[javascript] 클립보드 제어하기 + 예제

 

자바스크립트로 복사한 내용을 가져오거나 복사하는 방법에 대한 포스팅이다.

 

만들고 있는 토이 프로젝트에 클립보드 내용을 가져오는 코드가 있었는데 이젠 다른 방법을 사용하게 되어서 적어놓으려고 한다 😃

다음에 언제 쓰일 지 모르니까...

 

클립보드 복사하기, 붙여넣기 방법은 두 가지가 있다.

 

1. document.execCommand를 이용한 방법

2. navigator.clipboard를 이용한 방법

 

각자 장단점이 있으니, 예제를 보면서 살펴보자.

 

---

document.execCommand('copy') , document.execCommand('paste')

// 텍스트를 클립보드에 복사
function copyToClipboard(text) {
    var textarea = document.createElement("textarea");
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy'); // 복사하기
    document.body.removeChild(textarea);
}

// 클립보드에서 텍스트 가져오기
function getClipboardText() {
    var textarea = document.createElement("textarea");
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('paste'); // 붙여넣기
    var clipboardText = textarea.value;
    document.body.removeChild(textarea);
    return clipboardText;
}

var textToCopy = "Hello, Clipboard!";
copyToClipboard(textToCopy);

var clipboardContent = getClipboardText();
console.log("Clipboard Content:", clipboardContent);

 

document 객체 execCommand 메소드를 이용해서 가져오는 코드이다.
copy, paste에 따라서 제어가 가능한데 단점으로는 일부 최신 브라우저에서 지원을 하지 않는다고 한다.

 

---

navigator.clipboard.readText(), navigator.clipboard.writeText()

// 클립보드의 텍스트를 가져오기
function getClipboardTextModern() {
    return navigator.clipboard.readText(); // 붙여넣기
}

getClipboardTextModern().then(function (clipboardContent) {
    console.log("Clipboard Content:", clipboardContent);
}).catch(function (err) {
    console.error("Failed to read clipboard content:", err);
});

// 텍스트를 클립보드에 복사하기
function copyToClipboard(text) {
    navigator.clipboard.writeText(text) // 복사하기
        .then(() => {
            console.log('클립보드에 복사되었습니다.');
        })
        .catch(err => {
            console.error('클립보드 복사에 실패했습니다:', err);
        });
}

var textToCopy = "Hello, Clipboard!";
copyToClipboard(textToCopy);

 

비교적 최신 기능인 navigator.clipboard 객체의 메소드를 이용하는 방법도 있다.
writeText로 복사하고, readText로 붙여넣기 한다.

 

브라우저 호환성이 높고, 위 방식에서 존재하는 보안상 이슈를 최소화하는 장점이 있다.

하지만 https 프로토콜에서만 동작하므로 사용 전에는 꼭 테스트 해봐야한다.