브라우저에서 클립보드 기능을 사용하려면 자바스크립트의 Clipboard API를 사용하여 복사, 붙여넣기 등의 작업을 수행할 수 있습니다.
Clipboard API를 사용하면 텍스트를 복사하거나 붙여넣는 기능을 웹 애플리케이션에 추가할 수 있습니다.
이는 Clipboard 객체를 통해 클립보드 기능과 상호작용하며, 사용자가 데이터를 복사하거나 붙여넣을 수 있게합니다.
Table of Contents
클립보드 복사
navigator.clipboard.writeText() 메소드를 사용하여 텍스트를 복사할 수 있습니다.
writeText() 메소드는 Promise 객체를 리턴하며, 성공적으로 복사되면 resolve 되고, 실패하면 rejected 됩니다.
navigator.clipboard.writeText('Hello, world!')
.then(() => {
console.log('Text copied to clipboard');
})
.catch(err => {
console.error('Failed to copy text: ', err);
});리턴 값이 Promise 객체이기 때문에 .then(), .catch() 메소드를 체이닝하여 복사 결과를 처리할 수 있습니다.
클립보드 붙여넣기
navigator.clipboard.readText() 메소드를 사용하여 텍스트 붙여넣기를 할 수 있습니다.
readText() 메소드 역시 Promise 객체를 리턴하고, 읽어온 텍스트를 resolve로 전달합니다.
navigator.clipboard.readText()
.then(text => {
console.log('Text from clipboard: ', text);
})
.catch(err => {
console.error('Failed to read clipboard contents: ', err);
});역시 리턴 값이 Promise 객체이기 때문에 메소드 체이닝을 사용할 수 있지만 async/await을 사용하여 읽기 쉽게 스크립트를 작성할 수도 있습니다.
예제 1: input 클립보드 복사
대표적인 기능으로 사용자가 버튼을 클릭하면 input 필드의 텍스트를 복사하는 기능을 구현할 수 있습니다.
<input type="text" id="text-input" value="Hello, Clipboard!">
<button id="copy-btn">Copy Text</button>
<script>
document.getElementById('copy-btn').addEventListener('click', () => {
const text = document.getElementById('text-input').value;
navigator.clipboard.writeText(text)
.then(() => {
alert('Text copied to clipboard!');
})
.catch(err => {
console.error('Error copying text: ', err);
});
});
</script>버튼에 클릭 이벤트를 addEventListener() 메소드를 통해 추가하여 버튼을 누르면 input 필드에 입력된 값을 복사했습니다.
예제 2: 클립보드 붙여넣기
사용자가 버튼을 클릭하면 텍스트를 읽어와서 표시하는 기능을 구현할 수 있습니다.
<button id="paste-btn">Paste Text</button>
<p id="output"></p>
<script>
document.getElementById('paste-btn').addEventListener('click', () => {
navigator.clipboard.readText()
.then(text => {
document.getElementById('output').innerText = 'Pasted text: ' + text;
})
.catch(err => {
console.error('Failed to read clipboard contents: ', err);
});
});
</script>복사 예제와 마찬가지로 버튼을 누르면 복사된 텍스트를 화면에 붙여넣기 합니다.
예제 3: 이미지 복사
Clipboard API는 텍스트뿐만 아니라 이미지와 같은 다양한 데이터 유형도 지원합니다.
이런 기능을 통해 이미지 파일을 클립보드에 복사할 수 있습니다.
const image = document.createElement('img');
image.src = 'https://example.com/sample.jpg';
navigator.clipboard.write([
new ClipboardItem({
'image/png': image
})
]).then(() => {
console.log('Image copied to clipboard!');
}).catch(err => {
console.error('Failed to copy image: ', err);
});write() 메소드에 ClipboardItem() 객체를 생성하여 이미지를 복사했습니다.
예제 4: 클립보드 이벤트
ClipboardEvent를 사용하면 복사, 붙여넣기 등과 관련된 이벤트를 처리할 수 있습니다.
대표적으로 copy, cut, paste 등의 이벤트를 처리할 수 있습니다.
<textarea id="text-area"></textarea>
<script>
document.getElementById('text-area').addEventListener('copy', (event) => {
console.log('Content copied to clipboard');
});
document.getElementById('text-area').addEventListener('paste', (event) => {
console.log('Content pasted from clipboard');
});
</script>권한 관련
- HTTPS에서만 동작: Clipboard API는 보안상의 이유로 HTTPS 환경에서만 동작합니다. HTTP 환경에서는 사용이 불가능합니다.
- 사용자 권한: 텍스트를 복사하는 작업은 사용자의 명시적인 상호작용이 있어야만 가능합니다. 예를 들어, click 이벤트나 keydown 이벤트와 같은 사용자 동작이 있어야 navigator.clipboard.writeText() 메소드를 호출할 수 있습니다.
정리
Clipboard API는 웹 애플리케이션에서 클립보드 기능과 상호작용하는 매우 유용한 도구입니다.
텍스트나 이미지같은 다양한 데이터를 복사하거나 붙여넣는 기능을 쉽게 구현할 수 있습니다.
하지만 보안상의 이유로 사용자 상호작용을 요구하고, HTTPS 환경에서만 동작한다는 점을 유의해야 합니다.