클립보드에서 JavaScript 붙여넣기 텍스트

Clipboard API 또는 execCommand 을 사용하여 JavaScript의 클립보드에 텍스트를 복사하는 방법에 대한 여러 기사를 작성했습니다.

그러나 버튼 클릭으로 클립보드에서 정보를 붙여넣는 방법은 살펴보지 않았습니다.

최근에 누군가가 저에게 Twitter에서 이 작업을 수행하는 방법을 물었습니다. 그래서 여기에서 클립보드에 텍스트를 붙여넣는 데 대한 전용 기사를 소개합니다.

클립보드에서 JavaScript 붙여넣기 텍스트

이 기능의 주요 문제는 브라우저에서 이 데이터를 읽을 수 있는 권한이 필요하다는 것입니다.

따라서 첫 번째 시도에서 사용자에게 다음과 같은 팝업이 표시됩니다.



기존 클립보드 데모를 가져와서 붙여넣기 필드가 상호 작용하도록 합시다.

데모에서는 상단 텍스트 영역을 클릭할 수 있어야 합니다. 그러면 텍스트가 클립보드에 복사됩니다.

사용자가 하단 필드를 클릭하면 자동으로 붙여넣어야 합니다.

먼저 이 필드를 변수에 할당하고 클릭 핸들러를 연결해야 합니다.

const paste = document.getElementById('paste');
paste.addEventListener('click', () => {
  // Do our action
});

실제 붙여넣기 작업은 매우 간단하며 다음과 같습니다.

navigator.clipboard.readText().then((clipText) => (paste.innerText = clipText));

클립보드 API를 사용하고 readText 함수를 호출합니다. 붙여넣기 필드에 설정할 수 있는 현재 값을 제공합니다.

다음 CodePen에서 이것을 시도할 수 있습니다.

클립보드 API에 대한 브라우저 지원

Clipboard API에 대한 지원은 지난 몇 달 동안 크게 향상되었으며 모든 최신 버전은 완전히 지원하는 것 같습니다.

읽어주셔서 감사합니다. 연결해 보겠습니다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook 또는