HTML DOM 클립보드 이벤트

<시간/>

HTML DOM Clipboard 이벤트는 클립보드 수정에 대한 정보를 제공하는 데 사용됩니다. 이벤트는 잘라내기, 복사 및 붙여넣기가 가능합니다. 클립보드 이벤트를 사용하여 사이트에 더 쉽게 액세스할 수 있습니다. 예를 들어 사용자에게 클립보드가 수정되는 방식에 대한 정보를 제공할 수 있습니다.

속성

다음은 클립보드 이벤트의 속성입니다 -

속성	설명
클립보드 데이터	클립보드 작업(잘라내기, 복사 또는 붙여넣기)의 영향을 받는 데이터를 포함하는 개체를 반환합니다.

이벤트

다음은 클립보드 이벤트에 속하는 이벤트 유형입니다 -

이벤트	설명
복사본	이 이벤트는 사용자가 요소의 내용을 복사할 때 발생합니다.
온컷	이 이벤트는 사용자가 요소의 내용을 잘라낼 때 발생합니다.
붙여넣기	이 이벤트는 사용자가 요소에 일부 콘텐츠를 붙여넣을 때 발생합니다.

구문

다음은 클립보드 이벤트의 구문입니다 -

var clipboardEvent = new ClipboardEvent(type,[options]);

여기서 유형은 '잘라내기', '복사' 또는 '붙여넣기'가 될 수 있으며 두 번째 매개변수는 선택 사항입니다. 두 번째 매개변수에는 clipboardData, dataType 및 데이터가 포함됩니다.

예시

oncopy −

클립보드 이벤트 중 하나에 대한 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<form>
<label> TEXTBOX <input type="text" oncopy="CopyText()" value="Copy this text">
</label>
</form>
<p id="Sample"></p>
<script>
   function CopyText() {
      document.getElementById("Sample").innerHTML = "The text has been copied by you!"
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 클립보드 이벤트

TEXTBOX 내부의 텍스트 복사 시 -

HTML DOM 클립보드 이벤트

위의 예에서 -

텍스트 유형의 요소를 만들었습니다. 여기에는 레이블 TEXTBOX가 할당되어 있고 사용자가 선택할 수 있도록 이미 내부에 일부 텍스트가 포함되어 있습니다. 사용자가 텍스트를 복사하면 CopyText() 메소드가 실행됩니다.

<label> TEXTBOX <input type="text" oncopy="CopyText()" value="Copy this text">

CopyText() 메서드는 문서에서 getElementById() 메서드를 사용하여

요소를 가져오고 단락 내부에 "텍스트가 복사되었습니다!"를 표시합니다.

function CopyText() {
   document.getElementById("Sample").innerHTML = "The text has been copied by you!"
}