웹 페이지를 사용하다보면 웹에서 생성된 코드등을 복사해서 다른곳에 붙여넣을 일들이 많다.
이때 전체를 드래그로 복사해서 붙여넣기 하는 과정에서 여러 번의 조작이 필요한데 가끕 보면 "복사하기" 같은 버튼이 있어서 손쉽게 내용을 클립보드로 복사하는 페이지들이 있다.
이번 포스트에서는 웹 화면에서 복사하기를 통해 클립보드에 저장하는 방법을 살펴보자.
Clipboard API
이전에는
과거에는 document 객체의 execCommand 함수를 이용해서 input 요소의 내용을 복사해서 사용했다.
document.querySelector("#cleanCode").select();
document.execCommand("Copy");
하지만 위의 방식은 deprecate 되고 앞으로는 없어질 예정이다.
Clipboard api
새롭게 발표된 Clipboard api는 navigator의 속성으로 제공되며 cut/copy/paste 기능을 구현하기 위한 interface이다.
Clipboard - Web APIs | MDN (mozilla.org)
Clipboard - Web APIs | MDN
The Clipboard interface implements the Clipboard API, providing—if the user grants permission—both read and write access to the contents of the system clipboard. The Clipboard API can be used to implement cut, copy, and paste features within a web appl
developer.mozilla.org
제공되는 함수는 이름만 들어도 쉽게 알수 있는 read(), readText(), write(), writeText()가 있다. 이 함수들은 모두 시스템의 클립보드와 비동기로 통신하기 때문에 primise 객체를 반환한다.
navigator.clipboard.readText().then(
clipText => document.querySelector(".cliptext").innerText = clipText);
navigator.clipboard.writeText("<empty clipboard>").then(function() {
/* clipboard successfully set */
}, function() {
/* clipboard write failed */
});