clipboard copy element

<Clipboard-Copy>要素

要素のテキストコンテンツまたは入力値をクリップボードにコピーします。

インストール

 $ npm install --save @github/clipboard-copy-element

使用法

スクリプト

ESモジュールとしてのインポート：

 import '@github/clipboard-copy-element'

スクリプトタグ付き：

 < script type =" module " src =" ./node_modules/@github/clipboard-copy-element/dist/index.js " >

マークアップ

 < clipboard-copy for =" blob-path " class =" btn btn-sm BtnGroup-item " >
  Copy path
</ clipboard-copy >
< div id =" blob-path " > src/index.js </ div > 

データソース

属性

 < clipboard-copy value =" src/index.js " > Copy </ clipboard-copy >

要素コンテンツ

 < clipboard-copy for =" blob-path " > Copy </ clipboard-copy >
< div id =" blob-path " > src/index.js </ div >

フォーム入力

 < clipboard-copy for =" blob-path " > Copy </ clipboard-copy >
< input id =" blob-path " value =" src/index.js " >

ハイパーリンクhref

 < clipboard-copy for =" blob-path " > Copy full URL </ clipboard-copy >
< a id =" blob-path " href =" /path/to#my-blob " > Link text will not be copied </ a > 

イベント

クリップボードにコピーした後、 <clipboard-copy>要素からclipboard-copyイベントが発送されます。

 document . addEventListener ( 'clipboard-copy' , function ( event ) {
  const button = event . target
  button . classList . add ( 'highlight' )
} ) 

ブラウザのサポート

ネイティブのカスタム要素サポートのないブラウザには、ポリフィルが必要です。

• クロム
• Firefox
• サファリ
• Microsoft Edge

発達

 npm install
npm test

ライセンス

MITライセンスの下で配布されます。詳細については、ライセンスを参照してください。