JavaScript 클립보드 데이터

오늘의 게시물은 JavaScript에서 붙여넣기 이벤트에 대한 클립보드 데이터 감지에 대해 설명합니다.

JavaScript 클립보드 데이터

paste 이벤트는 사용자가 브라우저 UI를 통해 paste 작업을 시작할 때 발생합니다.

커서가 편집 가능한 컨텍스트에 있을 때 기본 작업은 클립보드의 내용을 문서의 커서 위치에 붙여넣는 것입니다. 이 이벤트에 대한 핸들러는 이벤트의 clipboardData 속성에서 getData()를 호출하여 클립보드의 내용에 액세스할 수 있습니다.

이벤트 핸들러는 event.preventDefault()를 사용하여 기본 작업을 취소하고 원하는 데이터를 수동으로 삽입하여 기본 동작을 재정의해야 합니다. 합성 삽입 이벤트를 만들어 보낼 수 있지만 문서의 내용에는 영향을 미치지 않습니다.

EventTarget 인터페이스의 addEventListener() 메서드는 지정된 이벤트가 대상에 전달될 때마다 호출되는 함수를 구성합니다.

예를 들어 두 개의 div 요소를 정의해 보겠습니다. 하나는 소스와 다른 하나는 대상입니다.

Source Div에는 복사할 데이터가 포함되며 대상은 복사된 데이터를 붙여넣을 위치입니다.

<div class="source">Hello World!</div>
<div class="destination" contenteditable="true">...Good Bye!</div>

const destinationElement = document.querySelector('div.destination');

destinationElement.addEventListener('paste', (event) => {
  const paste = (event.clipboardData || window.clipboardData).getData('text');
  console.log(paste);

  const selection = window.getSelection();
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(paste));
  event.preventDefault();
});

위의 예에서는 먼저 querySelector를 사용하여 대상 요소를 선택합니다. 요소가 선택되면 paste 이벤트를 수신합니다.

사용자가 데이터를 붙여넣는 즉시 이벤트에서 클립보드 데이터가 추출됩니다.

원본 콘텐츠는 대상 요소에서 삭제되고 새 콘텐츠가 대상 요소에 삽입됩니다. paste 이벤트를 지원하는 모든 브라우저에서 위의 코드를 실행해 보십시오. 당신은 아래 결과를 얻을 것이다.

전에:

후에:

데모