취업/CodeIgniter

[JS] DIV태그 복사버튼 기능 구현하기.

카슈밀 2022. 8. 29. 10:39
반응형

기존에 DIV태그 복사 기능을 구현해두었다.

https://curryyou.tistory.com/358

 

[자바스크립트] div, p, a, span 텍스트 복사(copy)기능 구현 방법

보통 자바스크립트에서 텍스트를 클립보드에 복사하는 방법은 textarea, input[text]태그의 value값을 선택하여 document.execCommand('copy') 명령어를 실행하는 것이다. [자바스크립트] 텍스트 클립보드 복사

curryyou.tistory.com

위 내용으로 썼는데, 

문제는 크롬에서

document.execCommand('copy');

위 내용이 Deprecated된 상태..

작동이 안됨.

 

그래서 찾아보았다.

클립보드 API를 사용하길 권장.

 // div 내부 텍스트 취득
        const valOfDIV = document.getElementById("ID").innerText;
        // textarea 생성
        const textArea = document.createElement('textarea');
        // textarea 추가
        document.body.appendChild(textArea);
        // textara의 value값으로 div내부 텍스트값 설정
        textArea.value = valOfDIV;
        // textarea 선택 및 복사
        textArea.select();
        navigator.clipboard.writeText(textArea.value); // 이렇게 변경!

        // textarea 제거
        document.body.removeChild(textArea);

이제 잘된다.

728x90