code copy ( ctrl+c, ctrl+v 효과 )

코드 카피가 급 필요해서 예전에 썼었는데.....

다시 쓸 일이 있어서 코딩하려는데 생각이 안나는 ㅠㅠ 

마흔이 넘으니 이젠 나의 메모리가 한계에 부딪치는....

 

 

삽질 후 정리해 본다.

 

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

Document.execCommand() - Web API | MDN