HTML DOM 클립보드 이벤트-HTML 튜토리얼-php.cn

Properties

Event

집

웹 프론트엔드

HTML 튜토리얼

HTML DOM 클립보드 이벤트

王林

Sep 23, 2023 pm 04:13 PM

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 내부의 텍스트를 복사하는 동안−

위의 예에서 −

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

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

로그인 후 복사

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

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

rreee

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7476

Cakephp 튜토리얼

1377

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

& lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

& lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

& lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? Mar 20, 2025 pm 05:56 PM

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류? Apr 04, 2025 pm 11:54 PM

GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...

See all articles

HTML DOM 클립보드 이벤트

Properties

Event

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제