클립보드 복사란?
웹페이지에서 특정 영역의 텍스트 내용을 Ctrl+C를 해주는 기능을, JavaScript를 이용해서 구현된 기능입니다. 가장 대표적인 예로 네이버 지도에서 맛집을 검색 후 해당 가게를 지도에서 클릭하면, 해당 가게의 정보 중 주소 부분에 도로명, 지번, 우편번호를 복사할 수 있는 버튼이 클립보드 복사와 동일한 기능입니다. 클릭 후 메모장에 Ctrl+V를 하면 복사된 내용이 붙여넣기 됩니다.
예제 실행
안녕하세요!
클립보드 내용이 복사 되었습니다.
클립보드 내용이 복사 되었습니다.
예제 소스코드
// 클립모드 복사
function copyText(targetId) {
const text = document.getElementById(targetId).innerText; // html text
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text)
.then(() => alert("복사완료"))
.catch(err => alert("복사실패: " + err));
} else {
// fallback 방식
const textarea = document.createElement("textarea");
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
try {
document.execCommand("copy");
alert("복사완료");
} catch (err) {
alert("복사실패: " + err);
}
document.body.removeChild(textarea);
}
}코드 설명
버튼 클릭 시 copyText(아이디) function을 호출해서 해당 아이디의 text 내용을 clipboard에 복사하는 기능입니다. 해당 소스는 text만 복사할 수 있지만, HTML 태그까지 복사되게 수정할 수 있습니다. fallback 방식은 구형 브라우저를 위해 textarea 임의 생성해서 복사할 내용을 담은 다음 Command ‘copy’ 명령을 사용해서 복사 후 임의 생성한 textarea 삭제하는 구조입니다.