JavaScript 클립보드에 복사기능 구현

주소, 계좌번호등 웹상에서 클릭시 클립보드에 복사하는 기능을 구현해야하는 일들이 있다.

JavaScript를 사용하여 간단하게 하는 방법을 알아보자

---

1. HTML 버튼 추가

복사 기능을 시작 할 버튼을 추가(버튼외에 여러 방법으로도 가능)

<!-- 복사할 값이 들어있는 요소 -->
<input type="text" value="여기에 복사할 내용을 입력하세요" id="copyText">

<!-- 클릭할 버튼 -->
<button onclick="copyToClipboard()">클립보드에 복사</button>

 

2.JavaScript 함수 구현

위에서 생성한 버튼 클릭히 실행할 함수를 구현한다.

<script>
function copyToClipboard() {
    // 복사할 텍스트를 저장하고 있는 요소를 찾습니다.
    var copyText = document.getElementById("copyText");

    // 텍스트 필드를 선택합니다.
    copyText.select();
    copyText.setSelectionRange(0, 99999); // 모바일 기기에서 사용하기 위함

    // 선택한 텍스트를 클립보드에 복사합니다.
    document.execCommand("copy");

    // 사용자에게 텍스트가 복사되었다는 것을 알려줍니다.
    alert("클립보드에 복사되었습니다: " + copyText.value);
}
</script>

 

모던 브라우저용 코드 

이 코드는 더 안전하고, 프로미스 기반으로 에러 핸들링이 가능하다.

<script>
function copyToClipboard() {
    // 복사할 텍스트를 저장하고 있는 요소의 값을 가져옵니다.
    var copyText = document.getElementById("copyText").value;

    // 클립보드 API를 사용하여 텍스트를 클립보드에 복사합니다.
    navigator.clipboard.writeText(copyText).then(function() {
        alert("클립보드에 복사되었습니다: " + copyText);
    })
    .catch(function(err) {
        console.error('클립보드 복사에 실패했습니다: ', err);
    });
}
</script>

---

이렇게 간단한 코드로 클립보드에 복사가 가능하다. document 코드보다는 navigator를 사용하여 코드를 구현해보자.