- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2017-08-22T16:00:39+09:00","default:wikiwriter","wikiwriter")
#author("2017-08-22T16:14:22+09:00","default:wikiwriter","wikiwriter")
&tag(clipboard.js);
*目次 [#mfd6bcf6]
#contents
*関連ページ [#f7b0894c]
*参考情報 [#w8a8d846]
-[[clipboard.js — Copy to clipboard without Flash:https://clipboardjs.com/]]…公式サイト
-[[sadiqmmm/clipboard-rails: clipboard.js javascript library integration for your Rails 4 and Rails 5 applications:https://github.com/sadiqmmm/clipboard-rails]]…clipboard.jsのRuby Gems版。
*概容 [#ed730932]
-Flash廃止の方向につきその代替手段が必要となる。
-だいたいzeroclipboard的な雰囲気で使える。
*使用方法 [#z25b8e88]
-基本的な使用法は以下。
**他の要素の値をコピー [#yce176cc]
-基本的な使用法は以下。data-clipboard-targetで指定した他の要素のvalueを読み込む。
#pre{{
<script src="dist/clipboard.min.js"></script>
<script>
new Clipboard('.btn');
var clipboard = new Clipboard('.btn');
</script>
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
}}
**属性をコピー [#t1419e50]
-直接的にdata-clipboard-textの内容をコピーすることもできる。
#pre{{
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
}}
**コピー後のハイライトを消す [#z6c91fed]
-そのままだとコピー実行後ターゲットが選択状態になってしまう。
-以下のようにして消去する。
#pre{{
var clipboard = new Clipboard('#d_clip_button');
clipboard.on('success', function(e) {
e.clearSelection();
});
}}
*トラブルシューティング [#a9a67ed3]
**hiddenやdisplay: noneで指定された要素の値がコピーできない [#j9aa8ba5]
-[[programmed to work with hidden input? · Issue #59 · zenorocha/clipboard.js:https://github.com/zenorocha/clipboard.js/issues/59]]…コールバック関数を指定する。
-[[Why clipboard is blank? · Issue #288 · zenorocha/clipboard.js:https://github.com/zenorocha/clipboard.js/issues/288]]…position: absolute; left: bigNumberでずらす。
-どうやら仕様によってそのような事はできない模様。