목차
- oncopy 예제 - <input> 요소의 텍스트 복사 시 실행
- oncopy 정의
- oncopy 구문
- oncopy 예제 - <p> 요소의 텍스트 복사 시 실행
- 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>
결과보기
