[jQuery] text 복사 기능 본문

code/Javascript

[jQuery] text 복사 기능

남우p 2022. 7. 12. 17:57

 

 

<a href="#" class="btn xlarge" data-copy>라인버튼</a>
      // copy에 필요한 element append
      var $copyElem = $('<textarea id="copyItem"></textarea>');
      $copyElem.css({
        opacity: 0,
        position: "absolute",
        width: "1px",
        height: "1px",
        right: 0,
        padding: 0,
      });
      $("body").append($copyElem);
      var $textInner = $('<div class="textInner"></div>');
      $("body").append($textInner);

      // copy 액션
      $("[data-copy]").on("click", function () {
        //복사가 필요한 elem처리
        var findHtml = $(this).clone();//해당 element를 복사한다.
        findHtml.removeAttr("data-copy style");
        findHtml.find("*").removeAttr("data-copy style");
        //복사한 element와 element 하위에 있는 data-copy,style 속성을 제거한다.
        //해당 속성을 제거하지 않으면 복사한 다음에 수동으로 지워줘야 한다.

        $(".textInner").html(findHtml); //우선 div 안에 html을 붙여준다.
        var newer = $(".textInner").html(); //붙인 html을 다시 변수에 저장해준다.
        $("#copyItem").val(newer).select(); //변수에 저장한 html을 textarea 안쪽에 넣어준다.

        document.execCommand("copy"); //복사한 내용을 클립보드에 저장해준다.
        alert("복사 되었습니다"); // 복사됐다고 사용자에게 알려주는 알림창을 띄운다.
        $(".textInner").html(""); // 사용한 뒤, div박스의 내용을 싹 지워준다.
      });

1. 복사에 필요한 element(div 1개, textarea 1개)를 body 마지막에 강제 삽입 한다.

2. 복사할 element에 [data-copy] 속성을 추가한다.

3. [data-copy] 를 누르면 onClick 이벤트를 적용한다.

 

주석참조

 

 

 

 

 

 

Comments