본문 바로가기
FrontEnd 프론트엔드

[클립보드 복사] 텍스트 or 이미지 복사 버튼 만들기 - JavaScript / HTML

by chloeize 2021. 5. 22.
728x90

div#copyTxt의 텍스트 '이메일'을 복사합니다.
구현 모습

728x90

    <div>

        <input type="button" value="텍스트 복사하기" onclick="copyT()"/> 

        <div id="copyTxt">이메일</div>

    </div>

    

 

    <script>

            function copyT() {

                var obj = document.getElementById("copyTxt");

                var range = document.createRange();

                range.selectNode(obj.childNodes[0]); //텍스트 정보를 Range 객체에 저장

                //range.setStart(obj.childNodes[0], 0); //추가

                //range.setEnd(obj.childNodes[0], 5); //추가

                var sel = window.getSelection();

                sel.removeAllRanges(); //기존 선택정보 삭제

                sel.addRange(range); //텍스트 정보 선택

                document.execCommand("copy"); //복사

                sel.removeRange(range); //선택 정보 삭제

                alert('복사되었습니다 :)');

            }

    </script>



 

728x90