[Javascript] clipboard.js-クリップボードにコピー

12924 ワード
JavaScript テキストリンク
Webページを開発する場合は、ページのテキストをクリップボードにコピーする必要があります.
インポートと使用が容易なライブラリについて説明します.

過去を思い出すと.Webの初期には、フラッシュメモリを使用して、画面の外にtextareaを作成し、テキストを選択してコピーする方法がいくつかありましたが、クリップボードに直接アクセスすることもできます.できないことではありませんが、簡単な機能なので、コードに時間をかけるよりも、簡潔で楽で検証済みのライブラリを書くほうが便利です.^^
インストールと使用:
  • サイトからソースまたは  ページの bodyの下部に追加します.
    • <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
  • コピー機能のボタンを選択し、スクリプトを実行します.
    • <script>
new ClipboardJS('.btn');
</script>
    上記は、ボタンごとにbtnというクラスを指定する例です.
    htmlオブジェクトやオブジェクトのリストを直接渡すか、単数/複数を考慮せずにセレクタを追加できます.
  • コピーボタンで、コピーするテキストを指定できます.
    • <!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger --><button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut to clipboard
</button>

...
...
...

<!-- Trigger -->

<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
    基本的な使い方は大きく2つあります.
    コピーするテキストを含むinputまたはtextareaのidボタンのコピー data-clipboard-target 属性を挿入し、
    inputまたはtextarearがない場合 ダイレクト挿入ボタン data-clipboard-text コピーするプロパティのテキストを指定します.
    また、inputまたはtextareaを使用すると、ボタンの data-clipboard-action ツールバーの カットすればカットできます
    ご参考まで  cdnサービス 
    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
<title>constructor-nodelist</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head><body><!-- 1. 복사를 담당한 버튼들 -->
<button data-clipboard-text="1">Copy</button>
<button data-clipboard-text="2">Copy</button>
<button data-clipboard-text="3">Copy</button>

<!-- 2. js 추가 --><script src="../dist/clipboard.min.js"></script>

<!-- 3. 라이브러리 실행 -->

<script>
var btns = document.querySelectorAll('button');
var clipboard = new ClipboardJS(btns);

clipboard.on('success', function(e) {console.log(e);
});

clipboard.on('error', function(e) {console.log(e);
});
</script>
</body>
</html>
    ダウンロードサイト:  完全なプレゼンテーションソース
    clipboardjs.com/
    また、上記のWebサイトを参照すると、下の内容が表示されます.必要に応じて、参照してください.
  • レプリケーション成功および失敗後に実行するイベントハンドラの例
  • レプリケーションターゲットを動的に指定する方法
  • テキストを動的にコピーする方法
  • コンテナオブジェクトを指定する方法
    • .
  • ページからレプリケーション機能を消去するには、
    • を実行します.
    最後に、ブラウザがほとんどサポートされている場合は、心配する必要はありません.ブラウザがサポートされていない場合は、ctrl+cを使用するようにエラーイベントハンドラで通知することができます.
    TIL/20210808
    『ゼロから学ぶSwift』学習ノート(Day 35)――下書きは使われますか?