# 자바스크립트 클립보드 복사 방법
: 복사할 텍스트를 선택하고, 클립보드에 복사하는 방식이다.
1. 복사할 텍스트 선택
1) 사용자가 직접 복사할 영역 선택(드래그)하거나,
2) 자바스크립트로 textarea, input[text]의 값(value) 전체 선택한다.
textarea엘리먼트.select();
input[text]엘리먼트.select();
2. 선택된 텍스트 복사
- document.execCommad('copy')코드는 선택(드래그)된 영역의 텍스트를 클립보드에 복사한다.
document.execCommand('copy')
- execCommand 를 대체하는 최신 Clipboard API 사용방법은 아래 글을 참고!
[JS] 텍스트 복사(Copy) 완전 쉬운 방법: Clipboard API
# 샘플 예제 소스 코드
1. 사용자가 선택(드래그)한 텍스트 복사 기능 구현
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body>
<!-- 1. 수동 선택(영역) 복사 -->
<button id="btn_select_copy">선택 복사하기</button>
<p>복사하고 싶은 부분을 드래그 하세요!</p>
</body>
<script>
// 1. 선택(드래그) 영역 복사
document.getElementById("btn_select_copy").onclick = function(){
document.execCommand('copy');
}
</script>
</html>
- 실행 결과: 텍스트 일부를 드래그 후, 버튼을 누르면 복사가 완료된다.
2. textarea, input[text] 영역의 텍스트 전체 복사
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body>
<!-- 2-1. textarea 태그 -->
<button id="btn_textarea_copy">textarea 전체 복사하기</button><br>
<textarea id="textArea">textarea 영역입니다.</textarea><br><br><br>
<!-- 2-2. input:text 태그 -->
<button id="btn_input_copy">input:text 전체 복사하기</button><br>
<input type="text" id="input_text" value="input:text영역입니다.">
</body>
<script>
// 2-1. textarea 복사
document.getElementById("btn_textarea_copy").onclick = function(){
const textArea = document.getElementById("textArea");
textArea.select();
document.execCommand('copy');
}
// 2-2. input:text 복사
document.getElementById("btn_input_copy").onclick = function(){
const input_text = document.getElementById("input_text");
input_text.select();
document.execCommand('copy');
}
</script>
</html>
- 실행결과: 버튼을 누르면, textarea나 input[text] 영역의 텍스트(value 값) 전체가 복사된다.
# 주의 사항
1. 일부 모바일 브라우저(iOS)에서 선택되지 않는 이슈가 있어, 아래와 같이 선택 기능을 구현하도록 권장된다.
textarea엘리먼트.select();
textarea엘리먼트.setSelectionRange(0, 99999); // 모바일 브라우저(iOS)등에서 작동하도록 선택 필요!
document.execCommand('copy');
textarea엘리먼트.setSelectionRange(0, 0); // 모바일 브라우저(iOS)등에서 작동하도록 선택 필요!
2. textarea나 input에 disabled 속성이 설정된 경우, 선택(드래그)/복사되지 않는다.
3. textarea, input[text]외에 다른 태그(div 등)내부의 텍스트는 선택/복사되지 않는다.
*div 등 다른 태그의 텍스트를 복사하는 방법은 아래 글 참고
[자바스크립트] div, p, a, span 텍스트 복사(copy)기능 구현 방법
'개발(Development) > JS(자바스크립트)' 카테고리의 다른 글
| [자바스크립트] JSON형식 직렬화/역직렬화 방법 (0) | 2021.07.09 |
|---|---|
| [자바스크립트] div, p, a, span 텍스트 복사(copy)기능 구현 방법 (0) | 2021.07.08 |
| [자바스크립트] HTML엘리먼트 생성, 추가, 삭제, 속성/텍스트/내부html 설정 방법 (0) | 2021.07.07 |
| [node.js] Socket.IO 웹 소켓 모듈 기본 사용 방법 (1) | 2021.07.06 |
| [자바스크립트] HTML 엘리먼트(태그/노드) 선택/취득 방법 (0) | 2021.07.04 |
댓글