[jQuery / javascript] 클릭시 복사되는 버튼 만들기 (이메일, 주소 복사) - 수정

안녕하세요 매니입니다. 이번 글에서는 클릭시 복사되는 버튼에 대해 알아보겠습니다.

 

 

클릭시 복사되는 버튼은 이벤트시 이메일 주소 복사, 홈페이지 url 복사 등에 유용하게 쓰입니다.

 

 

html

<button id="copybtn" onclick="copyToClipboard('https://manition.tistory.com');" title="주소 복사">매니션</button>

<button id="copybtn1" onclick="copyToClipboard();" title="주소 복사">주소 복사</button>
<button id="copybtn2" onclick="copyToClipboard();" title="긴 글 복사">긴 글 복사</button>

1. copybtn

    - 복사 내용을 태그에 바로 작성 

    - 단순 복사되는 기능만 가능(alert등 추가제어x) - copyToClipboard에 작성 가능하지만 공통제어만 가능

 

2. copybtn1

     - 복사 내용을 스크립트에 작성(하단참고)
3. copybtn2

     - 복사 내용을 객체로 생성(하단참고)

 

 

button ▶ 태그명(버튼태그)

onclick="copyToClipboard('https://manition.tistory.com');" ▶ 클릭시 실행되는 함수 ()안에 내용 복사

id="copybtn" ▶ id지정

style="padding:6px 20px; border:4px solid #40p3dd; background-color:#b9eafe;" ▶ 버튼 모양 만들기

title="주소 복사" ▶ 마우스 올리면 나오는 글자

매니션▶버튼에 쓰여지는 글자

 

 

 

 

블로그 사용시 주의사항!

 

블로그에서 이 기능을 넣은 뒤 수정 버튼을 누르면
onclick="copyToClipboard('https://manition.tistory.com');"
이 항목이 빠지게 됩니다. 수정시 HTML에서 이 기능을 반드시 다시 넣어주셔야합니다.

 

 

javascript

  <script>
    function copyToClipboard(val) {
    var t = document.createElement("textarea");
    document.body.appendChild(t);
    t.value = val;
    t.select();
    document.execCommand('copy');
    document.body.removeChild(t);
    }

    $('#copybtn1').click(function() {
      copyToClipboard('https://manition.tistory.com/');
      alert('주소를 복사하였습니다');
    });

    $('#copybtn2').click(function() {
      var textCopy = '청춘이 청춘의 방지하는 보이는 주는 가는 곳이 힘있다. 생생하며, 과실이 열락의 주는 예수는 스며들어 이것을 것이다. 크고 우리 보이는 희망의 아름다우냐? 공자는 가진 풍부하게 철환하였는가? 아니한 얼마나 새 만천하의 심장의 사막이다. 과실이 그들은 봄바람을 있는 많이 무엇이 때까지 풀이 이상 위하여서. 타오르고 그들의 얼마나 것이 보이는 트고, 방황하였으며, 약동하다. 든 위하여, 우리 칼이다. 인생을 얼음 가는 않는 우리의 부패뿐이다. 그러므로 힘차게 때까지 바로 이상, 품에 약동하다. 그와 방황하여도, 것은 더운지라 가치를 천자만홍이 무엇을 열락의 보는 끓는다.'
      copyToClipboard(textCopy);
      alert('글을 복사하였습니다');
    });
  </script>