テキストコピー
デモ
押してください
このテキストをコピーします。
1234567890
ABCDEFGHIJKLMN
JSコードコピー
使い方
コピーのトリガーになる任意の要素を用意し、data-jscopyand="copytext"
を付与してください。
コピーされるテキストを用意し、それを囲う要素に任意のid
を付与してください。
コピーのトリガーになる要素にdata-jscopyand-attributes="id名"
を付与してください。
解説
このテキストコピー機能は1画面で複数の設置を想定しているため、document.querySelectorAll
でトリガーとなる全ての要素を取得し、変数に格納します。
取得した全トリガー要素に対して反復処理を行い、イベントを設定していきます。
トリガー要素が持っているdata-jscopyand-attributes
属性を使い、コピーの対象となる要素を特定します。
もしも対象の要素が存在しなかった場合は処理を終了します。
コピーにはwindow.navigator.clipboard.writeText
という機能を使用します。
引数にコピーする文字列target.innerText
を渡します。
コピーが完了した時の処理をthen
というメソッドに関数を渡してしています。
本デモではアラートでコピー完了をお知らせします。
ヘルプ・コンタクト
機能に関するご質問は、このページの下部に表示されている Twitter
のアイコンから Twitter に遷移後、 DM 等でご連絡ください。
導入サポートやカスタマイズも有償にてお受け致しますので、 DM
等でご連絡ください。