LoginSignup
0

More than 3 years have passed since last update.

IEでコピーツールを作る

Posted at

はじめに

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

  • メモ帳の場合、範囲選択がめんどくさい※ダブルクリックしても思うような範囲選択にならないことも…
  • エクセルだとテキストをコピーしたいのにセルがコピーされちゃってややこしいことになったり…
  • そもそも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での実装も行ってみます(^^)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0