본문 바로가기
개발(Development)/JS(자바스크립트)

[자바스크립트] 텍스트 클립보드 복사(copy)/붙여넣기 기능 구현 방법

by 카레유 2021. 7. 8.

# 자바스크립트 클립보드 복사 방법

: 복사할 텍스트를 선택하고, 클립보드에 복사하는 방식이다.

 

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)기능 구현 방법

 


 

댓글