[attribute] HTML - oncopy 속성 - 요소의 텍스트나 이미지 태그를 복사 시 실행 (=oncopy속성 = 온카피속성) ※ oncopy이벤트 = 온카피이벤트

1. oncopy 예제 - <input> 요소의 텍스트 복사 시 실행
2. oncopy 정의
3. oncopy 구문
4. oncopy 예제 - <p> 요소의 텍스트 복사 시 실행
5. oncopy 예제 - <img> 복사 시 실행

oncopy 예제 - <input> 요소의 텍스트 복사 시 실행

※ 텍스트 내용 선택 후, Ctrl + C (복사하기) 시 실행됨.

 

<input type="text" oncopy="homzzang()" value="홈짱닷컴 Homzzang.com">

<p id="demo"></p>

<script>

function homzzang() {

  document.getElementById("demo").innerHTML = "복사완료"

}

</script>

결과보기

oncopy 정의

복사 시 실행됨. (예: 요소의 텍스트 내용 복사 / 이미지 태그 복사)

 

---

 

1. oncopy 속성 사용 가능 태그 종류

• 모든 HTML 요소에서 사용 가능. 
• 주로, <input type="text"> 요소에서 사용됨.

 

2. 복사 방법 2가지

• 복사하기 (Ctrl + C) 단축키 이용. cf. 붙여넣기: Ctrl + V
• 마우스 오른쪽 버튼 눌러 「복사」 선택. 

3.

모든 브라우저 지원. (단, 일부 브라우저 경우, <img> 복사 시 제대로 동작 안 할 수 있음.)

 

oncopy 구문

 

HTML 방식

• <element oncopy="myScript">

 

JS 방식 (3가지)

• object.oncopy = ()=>{myScript};
• object.oncopy = function(){myScript};
• object.addEventListener("copy", myScript);

---

[속성값]

 

myScript

복사 시, 실행할 JS 코드

• 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
• 사용 방식 통일 권장.

 

oncopy 예제 - <p> 요소의 텍스트 복사 시 실행

 

<p oncopy="homzzang()">홈짱닷컴 Homzzang.com</p>

<script>

function homzzang() {

  alert("복사완료");

}

</script>

결과보기

oncopy 예제 - <img> 복사 시 실행

※ 주의: 일부 브라우저 경우 제대로 동작 안 할 수 있음.

 

<img src="https://i.imgur.com/WfW5mBC.png" oncopy="homzzang()" alt="홈짱닷컴" width="185" height="39">

<script>

function homzzang() {

  alert("복사완료");

}

</script>

 

결과보기