【JavaScript】クリップボードにコピーさせる「コピー」ボタンを実装する


# jsで「コピー」ボタンを実装する
便利なライブラリがあるらしいのでこれを使わせていただく
[clipboard.js — Copy to clipboard without Flash](https://clipboardjs.com/)

（自分はzipでダウンロードした）

# 実装例
例えば出席者の状態（○×）とかを日ごとでコピーしたいなぁってときとかはこんな感じで書けばいける
（インデントとかCSSとかのコードの汚さはしらん:innocent:）

```test.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/clipboard.min.js"></script>
        <script type="text/javascript">
        function copyColumn(day) {

            //行数（tr）を取得
            var cnt = $("#records_table tbody").children().length;

            var copyval = "";
            for(var i = 0; i < cnt ; i++){
                copyval += $('[name="'+ day + '[' + i + ']"]').val() + "\n";
            }

            alert( day + 'の列をコピーしました。'); // 本来は判定分の中に入れるべき・・・

            new Clipboard('.copy_btn' , {
                text: function(trigger) {
                    return copyval;
                }
            });
        }
        </script>
        <style type="text/css">
        #records_table .row{
            text-align: center;
        }
        </style>
    </head>
    <body>
        <table border="1" id="records_table">
            <thead>
                <tr>
                    <th>02/02(金)<br><button class="copy_btn" onclick="copyColumn('02/02');">コピー</button></th>
                    <th>02/03(土)<br><button class="copy_btn" onclick="copyColumn('02/03');">コピー</button></th>
                    <th>02/04(日)<br><button class="copy_btn" onclick="copyColumn('02/04');">コピー</button></th>
                    <th>02/05(月)<br><button class="copy_btn" onclick="copyColumn('02/05');">コピー</button></th>
                    <th>02/06(火)<br><button class="copy_btn" onclick="copyColumn('02/06');">コピー</button></th>
                </tr>
            </thead>
            <tbody>
                <tr class="row">
                    <td class="check">〇<input type="hidden" name="02/02[0]" value="〇"></td>
                    <td class="check">×<input type="hidden" name="02/03[0]" value="×"></td>
                    <td class="check">×<input type="hidden" name="02/04[0]" value="×"></td>
                    <td class="check">〇<input type="hidden" name="02/05[0]" value="〇"></td>
                    <td class="check">〇<input type="hidden" name="02/06[0]" value="〇"></td>
                </tr>
                <tr class="row">
                    <td class="check">×<input type="hidden" name="02/02[1]" value="×"></td>
                    <td class="check">×<input type="hidden" name="02/03[1]" value="×"></td>
                    <td class="check">○<input type="hidden" name="02/04[1]" value="○"></td>
                    <td class="check">×<input type="hidden" name="02/05[1]" value="×"></td>
                    <td class="check">〇<input type="hidden" name="02/06[1]" value="〇"></td>
                </tr>
                <tr class="row">
                    <td class="check">○<input type="hidden" name="02/02[2]" value="○"></td>
                    <td class="check">○<input type="hidden" name="02/03[2]" value="○"></td>
                    <td class="check">×<input type="hidden" name="02/04[2]" value="×"></td>
                    <td class="check">×<input type="hidden" name="02/05[2]" value="×"></td>
                    <td class="check">×<input type="hidden" name="02/06[2]" value="×"></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
```

↓chromeでの動き
![copy.gif](https://qiita-image-store.s3.amazonaws.com/0/85815/b711afef-a2f2-e24a-8367-99c4a96ccab9.gif)

<br>

実際は`hidden`に隠し持ってる`value`を取得してるんで、厳密にはコピーじゃないけど、
まあこんなこともできるんだなって参考にしてください。