>  기사  >  웹 프론트엔드  >  HTML DOM 클립보드 이벤트

HTML DOM 클립보드 이벤트

王林
王林앞으로
2023-09-23 16:13:01959검색

HTML DOM 클립보드 이벤트는 클립보드 수정에 대한 정보를 제공하는 데 사용됩니다. 이벤트는 잘라내기, 복사, 붙여넣기가 가능합니다. 클립보드 이벤트를 사용하면 클립보드가 어떻게 수정되었는지에 대한 정보를 사용자에게 제공하여 웹사이트의 접근성을 높일 수 있습니다.

Properties

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

Property Description
clipboardData 클립보드 작업(잘라내기, 복사 또는 붙여넣기)의 영향을 받은 데이터가 포함된 개체를 반환합니다. ).

Event

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

Oncut이 이벤트는 사용자가 요소의 콘텐츠를 잘라낼 때 트리거됩니다. onpaste이 이벤트는 사용자가 요소에 일부 콘텐츠를 붙여넣을 때 트리거됩니다. Syntax
var clipboardEvent = new ClipboardEvent(type,[options]);
Example
<!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>
이렇게 하면 다음과 같은 출력이 생성됩니다−
클립보드 이벤트 구문은 다음과 같습니다 -여기서 type은 'cut', 'copy', 'paste'가 가능하며, 두 번째 인자는 선택사항입니다. 두 번째 매개변수에는 ClipboardData, dataType 및 데이터가 포함됩니다.
복사 시 클립보드 이벤트 중 하나의 예를 살펴보겠습니다. Output

TEXTBOX 내부의 텍스트를 복사하는 동안−

위의 예에서 −

텍스트 유형의 d5fd7aea971a85678ba271703566ebfd 요소를 생성합니다. 여기에는 TEXTBOX 태그가 할당되어 있으며 사용자가 선택할 수 있는 일부 텍스트가 이미 포함되어 있습니다. 사용자가 텍스트를 복사한 후 CopyText() 메서드가 실행됩니다.

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

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

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

rreee

위 내용은 HTML DOM 클립보드 이벤트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제