Works

Home Works コピーする

コピーする

button要素にクラスjs-copyを付与し、data-text属性にコピーする文言、data-msg属性にコピーした後に表示するメッセージを指定する。button要素の中身はなんでも良い。ここでは小さめボタンのスタイルを指定したり、コピーできそうなアイコンを入れている。ただし、コピー後に表示するメッセージは、吹き出しの横幅が最大12文字分なので、長い文章の場合は途中で改行を入れること。
data-text属性に$urlという値を入れた時のみ、現在ページのURLをコピーする。

<button type="button" class="c-button js-copy" data-text="コピーする文言" data-msg="「コピーする文言」を<br>コピーしました!">コピーするよ</button> <button type="button" class="js-copy" data-text="$url" data-msg="URLをコピーしました!"><svg width="24" height="24" viewBox="0 0 24 24" class="ico"><use href="../../assets/img/ico.svg#copy"/></svg></button>