[JS] 자바스크립트로 복사하기 버튼 만들기 [클립보드에 텍스트 복사하는 이벤트 생성]

- 자바스크립트로 복사하기 버튼 만들기

아래 코드는 버튼을 클릭하면 입력된 텍스트를 클립보드에 복사하는 예제이다.

이 코드를 사용하면 'textToCopy'라는 ID를 가진 <input>요소 안에 있는 텍스트를 복사한다.
클립보드에 복사된 후에는 경고 창으로 "Text copied to clipboard"와 함께 복사된 텍스트가 표시된다.

- index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy Button Example</title>
</head>
<body>
    <input type="text" id="textToCopy" value="Text to be copied">
    <button id="copyButton">Copy Text</button>

    <script src="copyButton.js"></script>
</body>
</html>

- copyButton.js

// 버튼 요소 가져오기
const copyButton = document.getElementById('copyButton');

// 버튼에 클릭 이벤트 리스너 추가
copyButton.addEventListener('click', function() {
    // 복사할 텍스트를 가져오기
    const textToCopy = document.getElementById('textToCopy');

    // 텍스트 선택
    textToCopy.select();
    textToCopy.setSelectionRange(0, 99999); // 모바일에서도 동작하도록 범위 설정

    // 클립보드에 복사
    document.execCommand('copy');

    // 선택 해제 (선택된 텍스트를 해제하여 사용자가 복사했음을 확인할 수 있도록 함)
    window.getSelection().removeAllRanges();

    // 복사 완료 메시지
    alert('Text copied to clipboard: ' + textToCopy.value);
});

- 자바스크립트로 복사하기 버튼 만들기

- index.html

- copyButton.js

티스토리툴바