Programming language/javascript
code copy ( ctrl+c, ctrl+v 효과 )
hello-world
2021. 1. 10. 03:25
728x90
반응형
코드 카피가 급 필요해서 예전에 썼었는데.....
다시 쓸 일이 있어서 코딩하려는데 생각이 안나는 ㅠㅠ
마흔이 넘으니 이젠 나의 메모리가 한계에 부딪치는....
삽질 후 정리해 본다.
HTML
<div class="code-info">
<button type="button" class="btn btn-default">btn btn-default</button>
<button type="button" class="btn btn-primary">btn-primary</button>
<button type="button" class="btn btn-success">btn-success</button>
<button type="button" class="btn btn-info"> btn-info</button>
<button type="button" class="btn btn-warning">btn-warning</button>
<button type="button" class="btn btn-danger">btn-danger</button>
<button type="button" class="btn btn-link">btn-link</button>
</div>
<div style="width:400px;margin-top:100px">
<textarea id="codeTextView" rows="10" style="width:100%"
placeholder="카피한 코드가 여기로 옮겨집니다."></textarea>
</div>
<button type="button" id="btnTagCopy">코드카피</button>
JS
let selectNodeCopy = targetEle => {
//선택영역이 있다면 제거하고 시작
if (window.getSelection) {
window.getSelection().removeAllRanges();
}
//textarea
let textAreaEle = document.getElementById("codeTextView");
//
//textarea value 값에 복사할 태그값을 대입
textAreaEle.value = targetEle.innerHTML;
//
//range 생성
let createRange = document.createRange();
//
//range에 Node 및 내용물을 포함 시킨다.
createRange.selectNode(targetEle);
//
//참고 - https://developer.mozilla.org/en-US/docs/Web/API/Selection/addRange
//window 선택영역에 추가
window.getSelection().addRange(createRange);
//클립보드에 현재 선택 영역의 내용을 복사.
document.execCommand("copy");
// alert("코드가 복사되었습니다.");
//코드 선택이 끝난후 엘리먼트 선택영역을 제거. ( 안해도 상관없지만 엘리먼트 퍼렇게 선택영역이 잡힐 것이다.)
window.getSelection().removeAllRanges();
};
//test
let btnTagCopy = document.getElementById("btnTagCopy");
btnTagCopy.addEventListener("click", function() {
selectNodeCopy(document.querySelector(".code-info"));
});
//
document.execCommand("copy") 함수가 핵심.
copy외에도 더많은 명령어가 있다.
아래 링크를 참고.
MDN - https://developer.mozilla.org/ko/docs/Web/API/Document/execCommand
728x90
반응형