아무래도 7note입니다! 클릭으로 풍선을 표시하는 방법

모르는 일이 있어 조사물을 하고 있을 때에, 원 클릭으로 카피할 수 있는 방법을 이전 기재했습니다.

【초보자라도 알 수 있다】 원 클릭으로 텍스트를 복사할 수 있는 버튼을 만드는 방법

이번에는 한층 더 풍선과 조합해 이러한 움직임을 넣습니다.

출처

index.html

<p>枠内をクリックするだけでコピーできます。</p>
<div class="copycode"><input type="text" value="1234" readonly><span>コピーしました！</span></div>

style.css

.copycode {
  position: relative;    /* バルーンを表示するための基準値とする */
  display: inline-block; /* インラインブロック要素にする */
}

.copycode span {
  opacity: 0;            /* 最初は透明にして見えなくする */
  position: absolute;    /* 表示を相対位置にする */
  top: 0px;              /* 上から0pxの位置でかつ */
  right: -5px;           /* 右から-5pxの位置に表示 */
  color: #fff;           /* 文字色を白に指定 */
  background: rgba(0,0,0,0.5);  /* 背景色を半透明の黒にする */
  padding: 2px 5px;             /* 適度な余白を指定 */
  transform: translate(100%);   /* 右側に出したかったので、バルーンの大きさ分右にずらす */
}

.copycode input:focus + span {
  animation: fade-out 2s ease-in; /* inputが選択状態になったときにだけアニメーションを1回実行する */
}

@keyframes fade-out {
  0% {visibility: visible; opacity: 1;}  /* 最初は表示して、 */
  100% {visibility: hidden; opacity: 0;} /* フェードアウトする */
}

script.js

$(function(){
  $(".copycode").on("click", function(){  // .copycodeがクリックされた時
    $(this).children("input").select();   // クリックされた要素の中にあるinputを選択状態にする
    document.execCommand("Copy");         // 選択しているテキストをクリップボードにコピーする
  });
});

※jQuery를 사용하고 있습니다.jQuery란 무엇입니까? 그렇다면 여기

해설

실제 사본 처리는 jQuery로 작성됩니다.
복사했습니다. 텍스트는 CSS에서만 쓸 수 있습니다.

의사 선택기는 :focus 라는 선택 상태인지 여부를 결정하여 CSS를 분리할 수 있습니다.
이것을 이용해, 클릭했을 때에 js를 움직이면서 동시에 CSS측에서 애니메이션을 움직이는 구조로 되어 있습니다.

또, input 요소에 readonly 를 태그에 붙이고 있습니다만, 이것은 편집 불가로 하는 것입니다. 실수로 복사해 주었으면 하는 내용이 사라져 버리거나 재기록되어 버리지 않게 하기 위해서 넣고 있습니다. 사용하는 장면에 따라 지워 이용하십시오.

요약

그 밖에도 다양한 것에 유용할 수 있을 것 같기 때문에, 또 아이디어가 굳어지면 기사로 하고 싶습니다.

소마츠!

~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임