JavaScriptでドラッグした文字を自動でコピーする方法

WEB制作、マーケティングに関する情報をお届けします。

JavaScriptでドラッグした文字を自動でコピーする方法

2025.02.22

カテゴリ：WEB制作

タグ：

JavaScript

※当サイトはアフィリエイト広告を利用しています。

ユーザーにテキストデータの提供などを行う際に使いやすさの向上が期待できるJavaScriptでドラッグした文字を自動でコピーする方法を紹介します。
社内用の情報ライブラリーなどを運用する際など作業効率も上がってくるかと思います。

デモを見る

コードを紹介

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ドラッグしたテキストをコピー</title>
    <style>
        .text-container {
            border: 1px solid #ccc;
            padding: 20px;
            margin: 20px 0;
            line-height: 1.8;
            background-color: #f9f9f9;
            user-select: text;
        }
        .message {
            margin-top: 20px;
            color: green;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>ドラッグしたテキストをコピー</h1>

    <div class="text-container">
        このテキストエリア内で文字を選択してください。<br>
        選択した範囲のテキストは、マウスボタンを離した時点で自動的にクリップボードにコピーされます。<br>
        実際に試してみてください！
    </div>

    <p class="message">ドラッグしたテキストがここにコピーされます。</p>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const textContainer = document.querySelector(".text-container");
            const message = document.querySelector(".message");

            textContainer.addEventListener("mouseup", function () {
                const selectedText = window.getSelection().toString();

                if (selectedText) {
                    navigator.clipboard.writeText(selectedText)
                        .then(() => {
                            message.textContent = `コピーしました: "${selectedText}"`;
                        })
                        .catch((err) => {
                            console.error("テキストのコピーに失敗しました:", err);
                        });
                } else {
                    message.textContent = "テキストが選択されていません。";
                }
            });
        });
    </script>
</body>
</html>

コードを解説

HMTLの解説は割愛します。

JavaScript

読み込みが完了してから実行します。

document.addEventListener("DOMContentLoaded", function () {
});

テキストを選択の対象となるエリアに『text-container』のクラス名を振ってあります。
以下で取得します。

const textContainer = document.querySelector(".text-container");

コピー完了時にメッセージを表示する要素を取得します。
こちらには『message』というクラス名を振ってあります。
※テキストを表示しない場合は不要

const message = document.querySelector(".message");

ドラッグしたテキストからマウスボタンを話した際に実行させます。

textContainer.addEventListener("mouseup", function () {
});

選択されたテキストを取得します。
※テキストを表示しない場合は不要

const selectedText = window.getSelection().toString();

選択されたテキストが存在するかどうかを確認してから実行させます。
選択されていない場合に処理が不要な場合は『else』は不要です。

if (selectedText) {
} else {
}

『.clipboard.writeText』でテキストをコピーします。

navigator.clipboard.writeText(selectedText)

then〜catchでコピーが成功した場合と失敗した場合にメッセージを出します。
※メッセージ不要であればなしでOK

.then(() => {
    // コピーが成功した場合、メッセージを更新
    message.textContent = `コピーしました: "${selectedText}"`;
})
.catch((err) => {
    // コピーに失敗した場合、エラーメッセージをコンソールに表示
    console.error("テキストのコピーに失敗しました:", err);
});