성장과정(dev)/Frontend(feat. Vue, Next.js)

[클립보드] javascript text copy

lowellSunny 2021. 3. 4. 10:59

처음에 span 태그에 있는 내용을 button 클릭 시 복사되도록 하려고 시도했는데 자꾸 실패했다.

 

 

실패한 코드

      let obj = document.getElementById("kyb-link");

      obj.select();
      document.execCommand("copy");
      obj.setSelectionRange( 0, 0 );

 

 

value를 넣을 수 있는 input text나 textarea로 해야한다고 한다.

그래서 요소 생성 후 삭제하는 방법으로 !

      // 글을 쓸 수 있는 란을 만든다.
      var aux = document.createElement("input");

      // 지정된 요소의 값을 할당 한다.
      aux.setAttribute("value", document.getElementById("kyb-link").innerHTML);

      // bdy에 추가한다.
      document.body.appendChild(aux);

      // 지정된 내용을 강조한다.
      aux.select();

      // 텍스트를 카피 하는 변수를 생성
      document.execCommand("copy");

      // body 로 부터 다시 반환 한다.
      document.body.removeChild(aux);

 

 

 

코드 그대로 따왔습니다 !

출처 : cosmosproject2015.tistory.com/195