如何使用JavaScript将文本复制到剪贴板？

Question

learn_code27 · 09.05.2026

如何使用JavaScript将文本复制到剪贴板？

大家好！我是一名初级前端开发者，遇到了一个看似简单但让我困惑的任务。我需要实现一个页面上的“复制”按钮，让用户只需点击一下即可将文本（例如链接、代码或生成的密码）复制到剪贴板。我曾尝试使用 `document.execCommand('copy')`，但发现在某些浏览器中运行不稳定，控制台还会出现方法已弃用的警告。此外，如果文本不在 `` 或 `

` 中，而是在普通的 `<div>` 或 `<p>` 中，我不太清楚如何正确选中文本后再复制。

以下是我的代码示例，它无法正常工作：

```javascript
function copyText() {
  const text = document.getElementById('myText').innerText;
  // 现在如何将 'text' 复制到剪贴板？
  // 尝试这样做，但没成功：
  document.execCommand('copy');
}
```

请告诉我，现代                    </div>

<div class="answers" id="answers-9132">
                                            <p>暂无回答。</p>
                    
                    
                                            <p style="color:#748791;padding:10px 0">
                            <a href="/login" style="color:#e92323">
                                登录                            </a>
                             以留下回答                        </p>
                    
                    
                    <section class="books-recomends recomends-block"
                             aria-label="博客">
                        <h2 class="recomends-title">
                            博客                        </h2>
                        <div class="blogs-container">
                                                            <a href="/zh/post304"
                                   title="PHP中的并发与多线程：实用指南">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.pexels.com/photos/4709288/pexels-photo-4709288.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
                                                 alt="PHP中的并发与多线程：实用指南"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">PHP中的并发与多线程：实用指南</h3>
                                    </div>
                                </a>
                                                            <a href="/zh/post2328"
                                   title="Java无服务器函数：AWS Lambda高级水平">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80"
                                                 alt="Java无服务器函数：AWS Lambda高级水平"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Java无服务器函数：AWS Lambda高级水平</h3>
                                    </div>
                                </a>
                                                            <a href="/zh/post3267"
                                   title="Swift中的代码审查：检查什么以及如何提供反馈">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1537432376769-00f5c2f4c8d2?w=800&q=80"
                                                 alt="Swift中的代码审查：检查什么以及如何提供反馈"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Swift中的代码审查：检查什么以及如何提供反馈</h3>
                                    </div>
                                </a>
                                                            <a href="/zh/post3570"
                                   title="Rust中的速率限制与节流：掌控数据流">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80"
                                                 alt="Rust中的速率限制与节流：掌控数据流"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Rust中的速率限制与节流：掌控数据流</h3>
                                    </div>
                                </a>
                                                            <a href="/zh/post4292"
                                   title="使用 Maven 构建包含依赖的 JAR 包：新手分步指南">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=800&q=80"
                                                 alt="使用 Maven 构建包含依赖的 JAR 包：新手分步指南"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">使用 Maven 构建包含依赖的 JAR 包：新手分步指南</h3>
                                    </div>
                                </a>
                                                    </div>
                    </section>
                </div>
            </article>

<aside class="discussion-sidebar-wrapper" aria-label="Сайдбар">
                
                <div class="discussion-sidebar">
                    <h2 class="discussion-sidebar__title">
                        最新                    </h2>
                                            <div class="discussion-sidebar__item">
                            <a href="/zh/forum10901"
                               class="sidebar-question"
                               title="如何用Mockito验证方法未被调用？">
                                <div class="sidebar-question__header">
                                    <img src="/images/default-ava.png" alt="Avatar"
                                         class="discussion__user-ava" loading="lazy" width="24" height="24">
                                    <strong class="sidebar-question__username">
                                        program_me26                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    如何用Mockito验证方法未被调用？                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 回复</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/zh/forum10900"
                               class="sidebar-question"
                               title="在会话中处理大量记录">
                                <div class="sidebar-question__header">
                                    <img src="/images/default-ava.png" alt="Avatar"
                                         class="discussion__user-ava" loading="lazy" width="24" height="24">
                                    <strong class="sidebar-question__username">
                                        question@mail.ru                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    在会话中处理大量记录                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 回复</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/zh/forum10899"
                               class="sidebar-question"
                               title="错误：pandas.errors.ParserError: Error tokenizing data. C error: Expected 1 fields in line 5, saw 9">
                                <div class="sidebar-question__header">
                                    <img src="/images/default-ava.png" alt="Avatar"
                                         class="discussion__user-ava" loading="lazy" width="24" height="24">
                                    <strong class="sidebar-question__username">
                                        question@mail.ru                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    错误：pandas.errors.ParserError: Error tokenizing data. C error: Expected 1 fields in line 5, saw 9                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 回复</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/zh/forum10898"
                               class="sidebar-question"
                               title="如何正确地将unique_ptr传递给构造函数或函数？">
                                <div class="sidebar-question__header">
                                    <img src="/images/default-ava.png" alt="Avatar"
                                         class="discussion__user-ava" loading="lazy" width="24" height="24">
                                    <strong class="sidebar-question__username">
                                        alex_dev12                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    如何正确地将unique_ptr传递给构造函数或函数？                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 回复</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/zh/forum10897"
                               class="sidebar-question"
                               title="如何在Kotlin Android应用中的Fragment内使用Jetpack Compose？">
                                <div class="sidebar-question__header">
                                    <img src="/images/default-ava.png" alt="Avatar"
                                         class="discussion__user-ava" loading="lazy" width="24" height="24">
                                    <strong class="sidebar-question__username">
                                        code_learner30                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    如何在Kotlin Android应用中的Fragment内使用Jetpack Compose？                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 回复</span>
                                </div>
                            </a>
                        </div>
                    </div>

</aside>
</div>

<section class="prelink-block" aria-label="类似问题">
  <h3 class="prelink-block__title">类似问题</h3>
  <div class="prelink-block__list">
                <a class="prelink-block__item" href="/zh/forum8890">
                <span class="prelink-block__name"> 为什么 println! 在 Rust 单元测试中不输出文本？</span>
      </a>
                <a class="prelink-block__item" href="/zh/forum10689">
                <span class="prelink-block__name"> 如何在 Rust 中生成指定范围内的随机数？</span>
      </a>
                <a class="prelink-block__item" href="/zh/forum10401">
                <span class="prelink-block__name"> 如何在 TypeScript 中实现 sleep 函数（延迟）？</span>
      </a>
                <a class="prelink-block__item" href="/zh/forum10652">
                <span class="prelink-block__name"> 为什么 Kotlin 禁止使用 Result<T> 作为函数的返回类型？</span>
      </a>
                <a class="prelink-block__item" href="/zh/forum10297">
                <span class="prelink-block__name"> 如何在Swift中获取数组的前5个元素？</span>
      </a>
      </div>
</section>

<script src="/js/jquery-3.6.1.min.js"></script>

<script defer src="/js/bootstrap.bundle.min.js"></script>
<script defer src="/js/main.js"></script>

<script>
(function () {
    var loaded = false;

// dataLayer и gtag объявляем ДО загрузки скрипта — GA сам его найдёт
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    window.gtag = gtag; // делаем глобальным, чтобы была доступна везде

function loadAnalytics() {
        if (loaded) return;
        loaded = true;

// Снимаем все слушатели сразу
        EVENTS.forEach(function (e) {
            window.removeEventListener(e, loadAnalytics, { passive: true });
        });

// ── Яндекс.Метрика ────────────────────────────────────────
        (function (m, e, t, r, i, k, a) {
            m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments); };
            m[i].l = 1 * new Date();
            // Не грузим дважды, если тег уже есть
            for (var j = 0; j < document.scripts.length; j++) {
                if (document.scripts[j].src === r) return;
            }
            k = e.createElement(t);
            a = e.getElementsByTagName(t)[0];
            k.async = 1;
            k.src = r;
            a.parentNode.insertBefore(k, a);
        })(window, document, 'script', 'https://mc.yandex.ru/metrika/tag.js', 'ym');

ym(109681950, 'init', {
            clickmap:          true,
            trackLinks:        true,
            accurateTrackBounce: true,
            webvisor:          true
        });

// ── Google Analytics ──────────────────────────────────────
        var gaScript = document.createElement('script');
        gaScript.src   = 'https://www.googletagmanager.com/gtag/js?id=G-3NHBQWNX9T';
        gaScript.async = true;
        // После загрузки скрипта инициализируем конфиг
        gaScript.onload = function () {
            gtag('js',     new Date());
            gtag('config', 'G-3NHBQWNX9T');
        };
        document.head.appendChild(gaScript);
    }

// Запускаем через 3 секунды ИЛИ при первом взаимодействии
    var timer  = setTimeout(loadAnalytics, 3000);
    var EVENTS = ['scroll', 'click', 'mousemove', 'touchstart', 'keydown'];

EVENTS.forEach(function (e) {
        window.addEventListener(e, function fireOnce() {
            clearTimeout(timer);       // отменяем таймер — пользователь уже здесь
            loadAnalytics();
            window.removeEventListener(e, fireOnce, { passive: true });
        }, { passive: true });
    });

})();
</script>

<noscript>
    <div>
        <img src="https://mc.yandex.ru/watch/109681950"
             style="position:absolute;left:-9999px"
             alt="Яндекс.Метрика">
    </div>
</noscript>

<div id="cookie-overlay">
    <div class="co-box">
        <div class="co-icon">🍪</div>
        <div class="co-title">Сначала примите условия</div>
        <p class="co-text">
            Чтобы войти на сайт, необходимо принять соглашение об использовании файлов cookie.
            Мы используем их для авторизации и улучшения работы сайта.<br><br>
            <a href="/privacy" target="_blank">Политика конфиденциальности</a>
        </p>
        <button class="co-accept" onclick="cookieConsentAccept()">Принять и продолжить</button>
        <button class="co-skip" onclick="document.getElementById('cookie-overlay').classList.remove('active')">Закрыть</button>
    </div>
</div>

<div id="cookie-banner">
    <div class="cb-inner">
        <div class="cb-text">
            🍪 Мы используем <strong>файлы cookie</strong> для авторизации, аналитики и улучшения работы сайта.
            Продолжая пользоваться сайтом, вы соглашаетесь с нашей
            <a href="/privacy" target="_blank">политикой конфиденциальности</a>.
        </div>
        <div class="cb-buttons">
            <button class="cb-accept" onclick="cookieConsentAccept()">Принять</button>
            <button class="cb-necessary" onclick="cookieConsentNecessary()">Только необходимые</button>
        </div>
    </div>
</div>

function getCk(name) {
        var m = document.cookie.match('(?:^|;)\\s*' + name + '=([^;]*)');
        return m ? decodeURIComponent(m[1]) : null;
    }
    function setCk(name, val) {
        var exp = new Date();
        exp.setFullYear(exp.getFullYear() + 1);
        document.cookie = name + '=' + encodeURIComponent(val)
            + '; expires=' + exp.toUTCString()
            + '; path=/; SameSite=Lax';
    }

// Принять всё
    window.cookieConsentAccept = function () {
        setCk(KEY, 'accepted');
        hideBanner();
        document.getElementById('cookie-overlay').classList.remove('active');
        // Если была попытка перейти на логин — редиректим
        if (window._ckPendingHref) {
            window.location.href = window._ckPendingHref;
            window._ckPendingHref = null;
        }
    };

// Только необходимые (баннер убираем, но трекинг не разрешаем)
    window.cookieConsentNecessary = function () {
        setCk(KEY, 'necessary');
        hideBanner();
    };

function hideBanner() {
        var b = document.getElementById('cookie-banner');
        if (b) b.style.display = 'none';
    }
    function showBanner() {
        var b = document.getElementById('cookie-banner');
        if (b) b.style.display = 'block';
    }

// При загрузке: если согласие не дано — показываем баннер
    if (!getCk(KEY)) {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', showBanner);
        } else {
            showBanner();
        }

// Перехватываем клики на /login и /registration
        document.addEventListener('click', function (e) {
            var el = e.target.closest('a[href]');
            if (!el) return;
            var href = el.getAttribute('href') || '';
            // Используем el.href — он всегда абсолютный, ловим и "login" и "/login"
            var normalizedHref = el.href || href;
            var isAuth = /\/login(\?|$|#)/i.test(normalizedHref) || /\/registration(\?|$|#)/i.test(normalizedHref);
            if (isAuth) {
                e.preventDefault();
                e.stopImmediatePropagation();
                window._ckPendingHref = href;
                document.getElementById('cookie-overlay').classList.add('active');
            }
        }, true);
    }
})();
</script>
</body>
</html>