Como copiar texto para a área de transferência usando JavaScript?

Question

learn_code27 · 09.05.2026

Como copiar texto para a área de transferência usando JavaScript?

Olá a todos! Sou um desenvolvedor front-end iniciante e me deparei com uma tarefa que parece simples, mas está me causando dificuldades. Preciso implementar um botão "Copiar" na página para que o usuário possa copiar texto (por exemplo, um link, código ou senha gerada) para a área de transferência com um clique. Tentei usar `document.execCommand('copy')`, mas encontrei problemas: em alguns navegadores funciona de forma instável, e no console aparecem avisos de que o método está obsoleto. Além disso, não entendo completamente como selecionar o texto corretamente antes de copiar, se ele não estiver em um `` ou `

`, mas, por exemplo, em um `<div>` ou `<p>` comum.

Aqui está um exemplo do meu código, que não funciona corretamente:

```javascript
function copyText() {
  const text = document.getElementById('myText').innerText;
  // Como copiar 'text' para a área de transferência agora?
  // Tentei fazer assim, mas não funcionou:
  document.execCommand('copy');
}
```

Por favor, me digam uma forma moderna                    </div>

<div class="question__footer">
                        <div class="question-footer__item question-footer__item-comment">
                            <svg aria-hidden="true" fill="#fff" height="16" viewBox="0 0 20 20" width="16">
                                <path d="M10 19H1.871a.886.886 0 0 1-.798-.52.886.886 0 0 1 .158-.941L3.1 15.771A9 9 0 1 1 10 19Zm-6.549-1.5H10a7.5 7.5 0 1 0-5.323-2.219l.54.545L3.451 17.5Z"/>
                            </svg>
                            <span class="question-footer__item-text">
                                0 respostas                            </span>
                        </div>
                    </div>
                </div>

<div class="answers" id="answers-9056">
                                            <p>No answers yet.</p>
                    
                    
                                            <p style="color:#748791;padding:10px 0">
                            <a href="/login" style="color:#e92323">
                                Faça login                            </a>
                             para deixar uma resposta                        </p>
                    
                    
                    <section class="books-recomends recomends-block"
                             aria-label="Blogs">
                        <h2 class="recomends-title">
                            Blogs                        </h2>
                        <div class="blogs-container">
                                                            <a href="/pt/post1309"
                                   title="Injeção de Dependência em Rust: para iniciantes">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80"
                                                 alt="Injeção de Dependência em Rust: para iniciantes"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Injeção de Dependência em Rust: para iniciantes</h3>
                                    </div>
                                </a>
                                                            <a href="/pt/post1534"
                                   title="10 melhores frameworks Java para desenvolvimento web: guia completo">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&q=80"
                                                 alt="10 melhores frameworks Java para desenvolvimento web: guia completo"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">10 melhores frameworks Java para desenvolvimento web: guia completo</h3>
                                    </div>
                                </a>
                                                            <a href="/pt/post3675"
                                   title="Como obter timestamp em JavaScript: 5 maneiras simples">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&q=80"
                                                 alt="Como obter timestamp em JavaScript: 5 maneiras simples"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Como obter timestamp em JavaScript: 5 maneiras simples</h3>
                                    </div>
                                </a>
                                                            <a href="/pt/post5182"
                                   title="Frameworks C# 2025: qual escolher para backend, web e microsserviços">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=800&q=80"
                                                 alt="Frameworks C# 2025: qual escolher para backend, web e microsserviços"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Frameworks C# 2025: qual escolher para backend, web e microsserviços</h3>
                                    </div>
                                </a>
                                                    </div>
                    </section>
                </div>
            </article>

<aside class="discussion-sidebar-wrapper" aria-label="Сайдбар">
                
                <div class="discussion-sidebar">
                    <h2 class="discussion-sidebar__title">
                        Recentes                    </h2>
                                            <div class="discussion-sidebar__item">
                            <a href="/pt/forum10216"
                               class="sidebar-question"
                               title="SqlException: Nova transação não é permitida enquanto houver outras threads em execução na sessão (Entity Framework)">
                                <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">
                                        python_newbie47                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    SqlException: Nova transação não é permitida enquanto houver outras threads em execução na sessão (Entity Framework)                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 respostas</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/pt/forum10215"
                               class="sidebar-question"
                               title="Erro "requires an imported helper but module 'tslib' cannot be found" ao usar módulos ES2015 no TypeScript">
                                <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">
                                        byte_coder27                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Erro "requires an imported helper but module 'tslib' cannot be found" ao usar módulos ES2015 no TypeScript                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 respostas</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/pt/forum10214"
                               class="sidebar-question"
                               title="Como usar namespace corretamente com módulos externos em TypeScript?">
                                <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">
                                        dev_junior68                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Como usar namespace corretamente com módulos externos em TypeScript?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 respostas</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/pt/forum10213"
                               class="sidebar-question"
                               title="Como usar corretamente as anotações Spring (@Autowired, @Component) em Kotlin?">
                                <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">
                                        debug_master59                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Como usar corretamente as anotações Spring (@Autowired, @Component) em Kotlin?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 respostas</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/pt/forum10212"
                               class="sidebar-question"
                               title="Como obter um caractere de uma string por índice em Go? (Problema com runas e bytes)">
                                <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">
                                        debug_master32                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Como obter um caractere de uma string por índice em Go? (Problema com runas e bytes)                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 respostas</span>
                                </div>
                            </a>
                        </div>
                    </div>

</aside>
</div>

<section class="prelink-block" aria-label="Perguntas similares">
  <h3 class="prelink-block__title">Perguntas similares</h3>
  <div class="prelink-block__list">
                <a class="prelink-block__item" href="/pt/forum5361">
                <span class="prelink-block__name"> Erro Kotlin: Could not find org.jetbrains.kotlin:kotlin-stdlib-jre7:1.0.7 ao compilar projeto Android</span>
      </a>
                <a class="prelink-block__item" href="/pt/forum8616">
                <span class="prelink-block__name"> Como configurar corretamente a variável de ambiente GOPATH no Ubuntu e qual arquivo editar?</span>
      </a>
                <a class="prelink-block__item" href="/pt/forum981">
                <span class="prelink-block__name"> Como converter int para enum em C#? Casting e Enum.Parse</span>
      </a>
                <a class="prelink-block__item" href="/pt/forum9539">
                <span class="prelink-block__name"> Kotlin: Interface não tem construtores — como criar uma instância?</span>
      </a>
                <a class="prelink-block__item" href="/pt/forum9749">
                <span class="prelink-block__name"> Cópia/Clonagem idiomática de um vetor em uma função parametrizada em Rust</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>