보통 자바스크립트에서
텍스트를 클립보드에 복사하는 방법은
textarea, input[text]태그의 value값을 선택하여
document.execCommand('copy') 명령어를 실행하는 것이다.
[자바스크립트] 텍스트 클립보드 복사(copy)/붙여넣기 기능 구현 방법
그런데 이 방법은 div, p, a, span 등 다른 태그의 내부 텍스트는 복사하지 못한다는 단점이 있다.
그래서 textarea를 가상(?)으로 생성하여 value값을 넣어서 복사하고, 다시 제거하는 방법을 사용한다.
# div, p, a, h, span 등의 값을 클립보드에 복사하는 방법
1. 태그(div 등)의 내부 값을 취득
const valOfDIV = document.getElementById("div").textContent;
2. textarea 엘리먼트 생성/추가 후, value값 설정
const textArea = document.createElement('textarea');
document.body.appendChild(textArea);
textArea.value = valOfDIV;
3. textarea 엘리먼트의 값 선택 및 복사
textArea.select();
document.execCommand('copy');
4. textarea 엘리먼트 제거
document.body.removeChild(textArea);
- 그런데 이제 Clipboard API 가 나와서 훨씬 쉽게 복사할 수 있게 되었다.(아래글 참고)
[JS] 텍스트 복사(Copy) 완전 쉬운 방법: Clipboard API
# 샘플 예제 소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body>
<!-- 3. 다른 태그(div)등의 텍스트 복사 -->
<button id="btn_div_copy">div 내부 텍스트 복사</button><br>
<div id="div">
div 영역입니다.
</div>
</body>
<script>
// 3. 다른 태그(div등)의 값 복사 기능 구현
document.getElementById("btn_div_copy").onclick = function(){
// div 내부 텍스트 취득
const valOfDIV = document.getElementById("div").innerText;
// textarea 생성
const textArea = document.createElement('textarea');
// textarea 추가
document.body.appendChild(textArea);
// textara의 value값으로 div내부 텍스트값 설정
textArea.value = valOfDIV;
// textarea 선택 및 복사
textArea.select();
document.execCommand('copy');
// textarea 제거
document.body.removeChild(textArea);
}
</script>
</html>
- 실행결과: 복사하기 버튼을 누르면, div내부의 텍스트가 복사된다.
자바스크립트의 기본 복사 기능에 대해서는 아래 글 참고
[자바스크립트] 텍스트 클립보드 복사(copy)/붙여넣기 기능 구현 방법
'개발(Development) > JS(자바스크립트)' 카테고리의 다른 글
| [node.js] 현재 파일/디렉터리 경로 확인 방법: __filename, __dirname (0) | 2021.07.09 |
|---|---|
| [자바스크립트] JSON형식 직렬화/역직렬화 방법 (0) | 2021.07.09 |
| [자바스크립트] 텍스트 클립보드 복사(copy)/붙여넣기 기능 구현 방법 (0) | 2021.07.08 |
| [자바스크립트] HTML엘리먼트 생성, 추가, 삭제, 속성/텍스트/내부html 설정 방법 (0) | 2021.07.07 |
| [node.js] Socket.IO 웹 소켓 모듈 기본 사용 방법 (1) | 2021.07.06 |
댓글