clipboard.js の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• clipboard.js へ行く。
• clipboard.js の差分を削除

#author("2017-08-22T16:13:51+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>
  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]]
-[[Why clipboard is blank? · Issue #288 · zenorocha/clipboard.js:https://github.com/zenorocha/clipboard.js/issues/288]]…position: absolute; left: bigNumberでずらす。
-どうやら仕様によってそのような事はできない模様。