TEXT내용 클립보드 복사하기

 

TEXT내용 클립보드 복사하기

안녕하세요 '밤구름'입니다.

이번 포스팅은 웹에서 버튼클릭으로 클립보드로 복사하게 해주는 기능을 만들었습니다.

단순 클립보드 복사기능은 쉽지만 좀더 이쁘게 만들기 위해서 여러가지 기능을 추가했습니다.

사용된 코드는 html(구성) / css(디자인) / 제이쿼리(DOM접근) / 자바스크립트(기능) 입니다.

코드리뷰 시작하겠습니다.

 

코드리뷰

<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  

<div id="wrap">
  <div class="box">
    <div id="text">
      <span>행복도 내가 만들고,<br>불행도 내가 만든다.<br>-법률스님-</span>
    </div>
    <button>COPY</button>
    <input type="text" id="copy_text">
  </div>
</div>
<div class="alertbox">
  <div class="box">
    클립보드에 복사 되었습니다.
  </div>
</div>

 

[HTML 부분]

1번째 줄 - 제이쿼리 cdn으로 불러온것

#wrap은 보여지는 부분

.alertbox는 알람으로 띄우는 부분(자바스크립트 alert가 안이뻐서 만들었다)

 

 

*{margin:0; padding:0; box-sizing:border-box;}
#wrap{display:flex; align-items: center; justify-content:center; height:100vh; width:100%; background-color:#ccc;}
.box{width:80%; height:300px; box-shadow:0 0 10px rgba(0,0,0,0.5); border-radius:15px; overflow:hidden; background-color:#fff;}
#text{margin:auto; padding:2%; text-align:center; display:flex; align-items: center; justify-content:center; height:80%; }
button{margin:auto; display:block; border-radius:50%; width:50px; height:50px; background-color:#ccc; cursor:pointer; border:0; box-shadow:0 0 10px rgba(0,0,0,0.9)}
.alertbox{background-color:rgba(0,0,0,0.7); position:fixed; display:flex; align-items: center; justify-content:center; height:100vh; width:100%; top:0; left:0; transition:1s; opacity:0; z-index:-1;}
.alertbox .box{display:flex; align-items: center; justify-content:center; opacity:0.7;}
input{opacity:0;}

[CSS 부분]

1번째 줄 - *로 초기화 하였음

나머지는 위에와 같습니다.

최근들어 한줄로 코딩하는 연습을 하고 있습니다.

ㄴ 줄별로 코드 확인 할수 있어서 좋고, 용량 압축되어 좋습니다.

참고로 execCommand를 하려고 한다면 화면에 요소가 존재해야 한다, display:none; hidden상태면 복사가 불가능하다.

그래서 opacity:0으로 화면에서만 보이지 않게 하였다.

 

$('button').click(function(){
  const copy = document.getElementById('copy_text');
  $(copy).val($('#text span').text());
  copy.select();
  document.execCommand( 'Copy' );
  $('.alertbox').css('opacity','1');
  $('.alertbox').css('z-index','1');
  setTimeout(()=>{
    $('.alertbox').css('opacity','0');
    $('.alertbox').css('z-index','-1');
  },1000);
})

[JS 부분]

1번째 줄 - 버튼을 클릭시 이벤트 시작

const copy 상수 선언, copy는 html에서 id가 'copy_text'인 것을 찾는다.

copy의 val() // 제이쿼리 문법 해당요소의 value값을 가져오거나 설정 할수 있다.

위에서는 value값을 설정해준다.

val($('text span').text()) // html에서 id가 'text' 요소의 span에 접근한다. 그리고 span의 내용을 copy의 value로 설정한다.

따라서 copy_text의 value에 #text span의 내용으로 설정한다.

copy.select(); // 해당 녀석을 선택하고

document.execCommand( 'Copy' ); // execCommand의 명령어로 복사 하게 한다

나머지 부분은 alert부분대신 나오는 알림창이 나오게 하였고,  setTimeout() 코드로 지연시간을 두어 사라지게 하였다.

 

결과

한번 시도해 보면 좋을것 같다.

 

디자인 시안 없이 만든것이라 많이 허접하다. 다른 디자인 넣어 꾸민다면 훨씬 더 이뻐 보일것이다.

명언도 바꾸는 기능, 배경화면이 있는 상태라면 더 이쁘지 않을까??