クリックしたら「コピーしました！」というバルーンを表示させる方法

どうも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制作のちょいテク詰め合わせ