clipboard API 사용 복사/붙여넣기

자바스크립트

by e7e 2024. 4. 16. 08:21

인터넷을 사용하다 보면 복사 버튼이 들어있는 사이트들이 꽤 있어서

직접 CTRL+C를 누르지 않고, 마우스로 버튼만 클릭해 주면

쉽게 복사가 되어, 필요한 곳에 CRL+V를 이용하면 된당.

우리가 영역을 선택하고 CTRL+C를 누르면, 메모리의 CLIPBOARD란

곳에 내용이 복사되는뎅, 그걸 이용하는 거시당.

이전엔 아래와 같은 명령어들을 이용했는뎅,

보안상의 이슈가 있어 deprecated 되었당.(쓰지 말란 이야기당!)

document.execCommand("copy")
document.execCommand("paste")
document.execCommand("cut")

아래와 같은 clipboard API를 사용하란당.(2개만 기억하장)

navigator.clipboard.writeText()
navigator.clipboard.readText()

아래 소스가 도움이 될 거시당.

readText()와 writeText()를 어케 사용했는지에만 뽀인트를 두장!

Promise를 알고 있어야만 거저당.

(괘니, execCommand를 사용하는 옛날방식도 참고용으로 넣었당)

일단 실행되면 현재 clipboard에 있는 값을 alert하게 해 놓았기 때문에,

원하는 문자열 부분을 선택하고, ctrl+c를 누르면 clipboard에 복사된 값을

확인할 수 있고, 새로고침하면 선택했던 문자열이 alert 되는 걸 확인!

복사했던 값이 계속 clipboard에 살아 있음을 확인할 수 있당.

나머지는 버튼 이벤트에 연결 시켰으니, 이벤트와 버튼을 누느로 따라가장!

<!DOCTYPE html>
<meta charset="UTF-8">
<style>
    div {
        border:5px groove pink
    }

    div * {
        display: inline;
        border: none;
    }

    #divPaste {
        height:300px;
        overflow: auto;
    }
    /* 크롬에서 스크롤바 감추깅 */
    #divPaste::-webkit-scrollbar {
        display: none;
    }
</style>
<body>
    <h1>ClipBoard API 사용</h1>
    <h2>(복사/붙여넣기)</h2>
    <button onclick="fCopyOld()">구식(클립보드에 넣깅)</button><br>
    <button onclick="fCopy()">신식(클립보드에 넣깅)</button>
    <button onclick="fPaste()">대상에 넣기</button><br>
    복사대상
    <div id="divCopy" contenteditable></div>
    <hr>
    붙여넣기 결과확인
    <div id="divPaste"></div>
    <script>
        "use strict"  // 엄격모드 적용

        /**** 전역변수 선언 영역 ***********/
        const divCopy = document.querySelector("#divCopy")
        const divPaste = document.querySelector("#divPaste")

        // 클립보드를 다루기 위한 새로운 navigator.clipboard
        const myClipBoard = navigator.clipboard; // 줄여쓰깅!

        //현재 clipboard에 있는 값 확인,신식 clipboard사용
        myClipBoard.readText().then(text => {
            alert("현재 클립보드의 값: "+ text);
        })

        /**** 전역변수 선언 영역 ***********/
        const ranColor = ()=>{
            let rgbColor = `rgb(
                              ${Math.round(Math.random()*255)} ,
                              ${Math.round(Math.random()*255)} ,
                              ${Math.round(Math.random()*255)} 
                            )`;

            return rgbColor;
        }

        // 옛날식 복사 deprecated.. 보고나서 그냥 있었구낭!..
        const fCopyOld = ()=>{
            let cont = divCopy.innerHTML;
            let textArea = document.createElement("textarea")
            textArea.value = cont;
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            document.execCommand("Copy");
            document.body.removeChild(textArea);
        }

        // 신식 navigator.clipboard사용 복사
        const fCopy = ()=>{
            let cont = divCopy.innerHTML;
            myClipBoard.writeText(cont);
        }

        // 신식 navigaor.clipboard사용 붙여넣기
        const fPaste = async () => {
            myClipBoard.readText().then((readData)=>{
                console.log("paste:",readData);

                let childDiv = document.createElement("div");
                childDiv.innerHTML = `${readData}`;
                childDiv.style.border = `2px solid ${ranColor()}`;

                divPaste.appendChild(childDiv);
                childDiv.scrollIntoView({behavior:"smooth"});

            })
        }
    
        // copy 이벤트(ctrl+c) / 사용자가 ctrl+c 이용
        divCopy.addEventListener("copy", (event) => {
            let selection = document.getSelection().toString();
                selection += "from e7e";
                
            alert(selection);              // 여기에 from e7e가 보이나

            // 아래 selection엔 들어가지 않음
            event.clipboardData.setData("text/plain", selection);
            event.stopPropagation(); // 상위 전파 막기
        });

        // copy 이벤트(ctrl+c) / 사용자가 ctrl+c 이용
        divCopy.addEventListener("paste", (event) => {
            event.clipboardData.getData("text/plain");
        });

    </script>
    <!-- 아래 script태그에는 type="module" 표현에 주의-->
    <script type="module">
          import { faker as fakerKO } from "https://esm.sh/@faker-js/faker/locale/ko";

          divCopy.innerHTML = fakerKO.lorem.paragraph(5);
    </script>
</body>
</html>

함수 fPaste 안에서 Promise를 리턴하는 readText()에 then을 사용했는뎅,

개인적으로 좋아하는 async/await를 이용한다면 아래처럼 고칠 수

있을 거시당.(요게 가독성이 더 좋아서 난 좋당!, 물론 함수 맹글어야 하는 귀차니즘도..)

        // fPaste  await 를 이용한 추천 사용법
        const fPaste = async () => {

            let readData = await  myClipBoard.readText(); 
            let childDiv = document.createElement("div");
            childDiv.innerHTML = `${readData}`;
            childDiv.style.border = `2px solid ${ranColor()}`;

            divPaste.appendChild(childDiv);
            childDiv.scrollIntoView({behavior:"smooth"});

        }

나의 경우 아래 그림 처럼 실행되었당.

요런 세팅 코드는 구지 외우려 할 필요는 없당.

그저 이해하고, 필요한 곳이 있다면, 필요한 부분만 가져다 쓰장!

그리움에 허기진 개가 한마리 있당.

고 개가 고개를 향해서 달리더니

고개 위해서 고개를 돌려 날 바라본당.

난 고개숙여 고개를 돌린당

고 개도 고개를 돌린당.

고 개는 끝내 고개를 넘는다

고개는 고 개의 모습을 감추고

고개 정상엔 고 개와 나의 그림움이

숯검댕이 되어 까맣게 어질하다

고개 정상엔 고 개의 눈물자국이 길다.

고개 너머 고 개를 향해 달린다.

돌봐줄거야!!~~

난 어른이잖아~~

고개위 고 개의 눈물자국에

고 개의 웃음이 배아프당.~~

https://www.youtube.com/watch?v=ll4QIbU1kv4

'자바스크립트' 카테고리의 다른 글

IntersectionAPI 오디 한번 싸용해 보올깡 (0)	2024.04.16
faker-js 이용 가짜(Dummy) 데이터 마궁 맹글깅 (0)	2024.04.10
fetch API를 Promise를 써 직접 맹글깡? (2)	2024.04.09
Promise(약속) 모르면 바보옹(비동기) (0)	2024.01.08
외부파일 드래그 앤 드롭3 (File Drag and Drop) (2)	2023.12.20