IEでコピーツールを作る

5959 ワード
JavaScript IE copy paste windwos JavaScript テキストリンク

はじめに

メモ帳やエクセルに書いてあるデータをコピペしまくる事、よくあります。でもちょっと使いにくい部分も…

  • メモ帳の場合、範囲選択がめんどくさい※ダブルクリックしても思うような範囲選択にならないことも…
  • エクセルだとテキストをコピーしたいのにセルがコピーされちゃってややこしいことになったり…
  • そもそもCtrl + cを押したくない…

クリックするだけでコピーできるツールがあると作業がはかどりそう！と思って作ってみました。

IEで実装してみる

index.html
<!DOCTYPE html>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>コピーテスト</title>

<style>
    table {
        border-collapse: collapse;
    }

    td {
        border: 1px solid #aaa;
        padding: 1rem;
        cursor: pointer;
    }
</style>

<table>
    <tr>
        <td>あいうえお</td>
        <td>かきくけこ</td>
    </tr>
    <tr>
        <td>さしすせそ</td>
        <td>たちつてと</td>
    </tr>
</table>

<script>
    (function () {
        var i,
            td = document.getElementsByTagName("td"),
            color1 = "black",
            color2 = "red";

        for (i = 0; i < td.length; i++) {
            td[i].style.color = color1;

            td[i].addEventListener('click', function () {
                window.clipboardData.setData("text", this.innerHTML);

                if (this.style.color == color1) {
                    this.style.color = color2;
                } else {
                    this.style.color = color1;
                }

            }, false);

        }

    }());
</script>

コピーしたい文字をクリックすると文字色が反転し、コピーされます。我ながら結構使いやすいです。文字を動的に変化させると色々なコピペツールが作れそうです。IE以外のブラウザでは動かないのが残念なので、後日エクセルVBAやElectronでの実装も行ってみます(^^)

C++踏込記録D 1
C++テンプレート:二分図マッチング