목차
copy 예제 - 텍스트복사 copy 정의 copy 구문 copy 예제 - 이미지복사 copy 예제 - 복사붙여넣기 출처 표시
copy 예제 - 텍스트복사
<input type="text" oncopy="homzzang()" value="홈짱닷컴 Homzzang.com">
<p id="demo"></p>
<script>
function homzzang () {
document.getElementById("demo").innerHTML = "복사완료"
}
</script>
결과보기
copy 정의
사용자가 요소 내용 복사 할 때 발생.
1.
사용자가 <img> 요소로 만든 이미지와 같은 요소 복사 할 때도 oncopy 이벤트 발생.
2.
oncopy 이벤트는 주로 <input type="text"> 요소에서 사용.
3.
(요소 / 요소내용) 복사방법 3가지.
CTRL + C
브라우저 편집 메뉴 > "복사" 선택
마우스오른쪽버튼 클릭 > "복사" 선택.
4.
모든 브라우저 지원. 단, 이미지복사 경우, 일부 브라우저에서 정상작동 안 할 수도 있음.
4.
5. MDN copy 예제보기
https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event
copy 구문
HTML 방식
<element oncopy="homzzang ()">
JS 속성 방식
object .oncopy = function(){homzzang ()};
JS 메서드 방식
object .addEventListener("copy", homzzang );
PS.
homzzang : 실행함수명. (함수명 자리에 실행코드를 직접 입력 가능)
addEventLister() 방식 주의사항 2가지 : (이벤트명에 on 안 붙인. / 실행함수명 뒤에 소괄호 안 붙임) addEventListener() 메서드는 IE8 및 그 이전 브라우저는 지원 안 함.
copy 예제 - 이미지복사
<img src="https://source.unsplash.com/random" oncopy="homzzang()" width="200px" height="auto">
<script>
function homzzang() {
alert("복사완료");
}
</script>
결과보기
PS. [주의] 크롬 경우, (Ctrl + C 복사 경우 : 작동 O) , (마우스오른쪽 > 복사 경우 : 작동 X)
copy 예제 - 복사붙여넣기 출처 표시
<div>홈짱닷컴 Homzzang.com</div>
<script>
window.addEventListener('copy', function (e){
document.execCommand('copy');
var thisURL = document.URL;
e.preventDefault();
e.clipboardData.setData('text/plain', document.getSelection() +
"\n\nPS. 출처: "+ thisURL);
}, false)
</script>
결과보기
출처: https://gunbin91.github.io/etc/2018/09/05/clipboardControl.html
