Tag: clipboard.js

目次

関連ページ

参考情報

概容

  • Flash廃止の方向につきその代替手段が必要となる。
  • だいたいzeroclipboard的な雰囲気で使える。

使用方法

他の要素の値をコピー

  • 基本的な使用法は以下。data-clipboard-targetで指定した他の要素のvalueを読み込む。
    <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>
    

属性をコピー

  • 直接的にdata-clipboard-textの内容をコピーすることもできる。
    <!-- Trigger -->
    <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
        Copy to clipboard
    </button>
    

コピー後のハイライトを消す

  • そのままだとコピー実行後ターゲットが選択状態になってしまう。
  • 以下のようにして消去する。
            var clipboard = new Clipboard('#d_clip_button');
            clipboard.on('success', function(e) {
                e.clearSelection();
            });
    

トラブルシューティング

hiddenやdisplay: noneで指定された要素の値がコピーできない


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2017-08-22 (火) 16:14:22 (514d)