Clipboard.jsの使い方 #Chrome |
您所在的位置：网站首页 › clipboardminjs › Clipboard.jsの使い方 #Chrome |
Clipboard.jsの使い方 #Chrome
|
使用した経緯
Flashでクリップボードに文言をコピーするボタンを「ZeroClipboard」というライブラリを導入して開発をしていたが、Chrome69へのアップデートによって、これが無効化され、許可を得ないと動作しないようになっていた。 対応方法そもそもFlashっていう懐かしさを感じるものは使用しないで、違うやり方を選びました。 そこで使用したのがClipboard.jsというjQueryプラグインです。 使い方とてもシンプル jsファイルをプロジェクト内に招待 使用するのはdist/clipboard.min.jpだけでいいので、これをcpとかでルートディレクトリのjsディレクトリに配置 HTMLのheadにて読み込み Page Title clipboardを使うとりあえずボタンを配置する。 index.htmlのbody内 コピーdata-clipboard-textに代入している文字列が、クリップボードにコピーされます。 js/clip.js var clipboard = new ClipboardJS('.btn'); // クリップ成功 clipboard.on('success', (e) => { alert(e.text + 'をコピーしたよ'); });インスタンスを生成して引数にはHTMLelement（クラス名とか）などを入れることができます。 具体的にはドキュメントをご覧あれ。 しかし困った。業務で実行したいのは、かなり長い文章をコピーするボタンで、アラートにはこちらで定めたタイトル的な短い文言を追加したいのだった。 直感で色々やって見た。 やって見た1 : インスタンス生成時にコールバック関数にてtitleを定義する js/clip.js var clipboard = new ClipboardJS('.btn', (e) => { text: (e) => { return e.text; } title: (e) => { return 'タイトル'; } }); // クリップ成功 clipboard.on('success', (e) => { alert(e.title + 'をコピーしたよ'); });こんな感じでやると、textやcontainer,triggerなど、もともと用意してある（eの直下にある）やつしか使用できない。 よって、これはundefinedでダメだった。 やって見た2 : data-clipboard-titleを作っちゃおう コピーこれで指定すればe.titleとかできんじゃね？とか思ったが、またもやundefined ここで気づいた。俺はeと正面から向き合ってないとりあえずconsole.log(e)としてログ出力。
こん感じで、自分でダメもとで作ったdata-clipboard-titleがちゃんと格納されている。 俺はこのclipboardTitleが欲しい。 やって見た3 : 最終 var clipboard = new ClipboardJS('.btn'); // クリップ成功 clipboard.on('success', (e) => { const title = e.trigger.dataset.clipboardTitle; alert(title + 'をコピーしたよ'); });これでちゃんと予期した動きをしてくれた。
貼り付けをしてもちゃんとdata-clipboard-textにて指定した文言が貼り付けられた。 結論、俺はeの直下しか踏み入れないようにしていたため、undefinedが表示され続けていた。 結論jsもっと勉強します。 当たり前かもしれないけど、data-clipboard-piyo='piyo'なんかで指定しても、 e.trigger.dataset.clipboardPiyoとして値を持つことができます。 たくさん持てますね |
【本文地址】