Как скопировать текст в буфер обмена с помощью 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');
}
```

Подскажите, пожалуйста, современный и надёжный способ копирования в буфер обмена на чистом JavaScript. Желательно с примерами для разных типов элементов (input, div). Заранее спасибо!
<<<ANSWER_1>>>
<h3>Современное решение: Clipboard API</h3>
<p>Начиная с 2020 года, лучший и рекомендуемый способ копирования текста в буфер обмена — использование <strong>Clipboard API</strong> (метод <code>navigator.clipboard.writeText()</code>). Это асинхронный, современный стандарт, который пришёл на смену устаревшему <code>document.execCommand('copy')</code>.</p>

<h4>Базовый пример для копирования из любого элемента</h4>
<p>Если текст находится в <code><div></code>, <code><p></code> или любом другом блочном элементе, просто прочитайте его содержимое и передайте в API:</p>

<pre><code>// HTML: <button onclick="copyToClipboard()">Копировать</button>
// <p id="myText">Текст, который нужно скопировать</p>

async function copyToClipboard() {
  const text = document.getElementById('myText').innerText;
  try {
    await navigator.clipboard.writeText(text);
    console.log('Текст скопирован!');
  } catch (err) {
    console.error('Ошибка копирования: ', err);
  }
}
</code></pre>

<h4>Копирование из поля ввода (input или textarea)</h4>
<p>Для <code><input></code> или <code><textarea></code> можно использовать свойство <code>.value</code>:</p>

<pre><code>// HTML: <input id="myInput" value="Текст из поля" />
// <button onclick="copyInput()">Копировать</button>

async function copyInput() {
  const input = document.getElementById('myInput');
  try {
    await navigator.clipboard.writeText(input.value);
    alert('Скопировано!');
  } catch (err) {
    console.error('Не удалось скопировать: ', err);
  }
}
</code></pre>

<h4>Важные моменты и обработка ошибок</h4>
<ul>
  <li><strong>Безопасность:</strong> Clipboard API работает только в <strong>безопасном контексте</strong> (HTTPS или localhost). На HTTP-сайтах метод будет недоступен.</li>
  <li><strong>Разрешения:</strong> Браузер запросит разрешение пользователя при первом вызове. Если пользователь отклонит, вызов упадёт в ошибку.</li>
  <li><strong>Асинхронность:</strong> Всегда используйте <code>async/await</code> или <code>.then()</code>, чтобы корректно обработать успех или ошибку.</li>
  <li><strong>Проверка поддержки:</strong> Перед вызовом можно проверить, существует ли API:
    <pre><code>if (!navigator.clipboard) {
  // Использовать старый метод execCommand как fallback
  fallbackCopyText(text);
}
</code></pre>
  </li>
</ul>

<h4>Устаревший, но рабочий fallback (execCommand)</h4>
<p>Если вам нужно поддерживать очень старые браузеры (например, Internet Explorer), используйте этот метод как запасной вариант:</p>

<pre><code>function fallbackCopyText(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed'; // Не скроллить страницу
  textarea.style.opacity = '0';
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}
</code></pre>

<h4>Полный пример с проверкой поддержки</h4>
<pre><code>async function copyToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyText(text);
    return;
  }
  try {
    await navigator.clipboard.writeText(text);
    alert('Скопировано!');
  } catch (err) {
    console.error('Ошибка: ', err);
  }
}
</code></pre>

<p>Используйте Clipboard API как основной метод — он проще, безопаснее и лучше интегрируется с современными браузерами.</p>
<<<ANSWER_2>>>
<h3>Альтернативный подход: копирование с помощью выделения и execCommand</h3>
<p>Если вы по каким-то причинам не можете использовать Clipboard API (например, проект работает на HTTP, или нужно поддерживать IE11), можно использовать проверенный временем метод с <code>document.execCommand('copy')</code>. Однако помните: этот метод считается устаревшим и может быть удалён в будущих версиях браузеров.</p>

<h4>Как это работает</h4>
<ol>
  <li>Создаётся временный элемент <code><textarea></code> или <code><input></code>.</li>
  <li>В него записывается нужный текст.</li>
  <li>Элемент добавляется в DOM, выделяется программно (через <code>.select()</code>).</li>
  <li>Вызывается <code>document.execCommand('copy')</code>.</li>
  <li>Временный элемент удаляется из DOM.</li>
</ol>

<h4>Пример кода</h4>
<pre><code>function copyTextFallback(text) {
  // Создаём невидимый textarea
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  textarea.style.left = '-9999px'; // Прячем за экраном
  document.body.appendChild(textarea);
  
  // Выделяем и копируем
  textarea.focus();
  textarea.select();
  try {
    const successful = document.execCommand('copy');
    if (successful) {
      alert('Текст скопирован!');
    } else {
      alert('Не удалось скопировать');
    }
  } catch (err) {
    console.error('Ошибка копирования: ', err);
  }
  
  // Убираем временный элемент
  document.body.removeChild(textarea);
}
</code></pre>

<h4>Когда использовать</h4>
<ul>
  <li>Для поддержки старых браузеров (IE11, Safari до 13.1).</li>
  <li>Если сайт работает по HTTP (без HTTPS).</li>
  <li>Как fallback при ошибке Clipboard API.</li>
</ul>

<p>Этот метод менее элегантен, но по-прежнему работает в подавляющем большинстве случаев. Главное — не забывайте удалять временный элемент после копирования, чтобы не засорять DOM.</p>                    </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 ответов                            </span>
                        </div>
                    </div>
                </div>

<div class="answers" id="answers-2920">
                                            <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="/ru/post529"
                                   title="Регулярные выражения в Java с примерами: Полное руководство">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1556549957-f41c6fcc4210?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w5NTM2Mzh8MHwxfHNlYXJjaHwzfHxqYXZhJTIwZ3VpZGV8ZW58MHx8fHwxNzc5MDYyNTY2fDA&ixlib=rb-4.1.0&q=80&w=1080"
                                                 alt="Регулярные выражения в Java с примерами: Полное руководство"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Регулярные выражения в Java с примерами: Полное руководство</h3>
                                    </div>
                                </a>
                                                            <a href="/ru/post611"
                                   title="Введение в Go: с чего начать в 2025 году — гайд для новичков">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.pexels.com/photos/6774948/pexels-photo-6774948.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
                                                 alt="Введение в Go: с чего начать в 2025 году — гайд для новичков"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Введение в Go: с чего начать в 2025 году — гайд для новичков</h3>
                                    </div>
                                </a>
                                                            <a href="/ru/post738"
                                   title="WebSocket на Go: создание real-time приложений на Golang">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1573496528681-9b0f4fb0c660?w=800&q=80"
                                                 alt="WebSocket на Go: создание real-time приложений на Golang"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">WebSocket на Go: создание real-time приложений на Golang</h3>
                                    </div>
                                </a>
                                                            <a href="/ru/post1407"
                                   title="Dependency Injection в TypeScript: простое руководство для начинающих">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80"
                                                 alt="Dependency Injection в TypeScript: простое руководство для начинающих"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Dependency Injection в TypeScript: простое руководство для начинающих</h3>
                                    </div>
                                </a>
                                                            <a href="/ru/post3467"
                                   title="Деплой C# на Kubernetes: базовое руководство на практике">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1587620962725-abab7fe55159?w=800&q=80"
                                                 alt="Деплой C# на Kubernetes: базовое руководство на практике"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Деплой C# на Kubernetes: базовое руководство на практике</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="/ru/forum4655"
                               class="sidebar-question"
                               title="Как программно вызвать обработчик нажатия (tap gesture) у UIView в Swift?">
                                <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_junior58                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Как программно вызвать обработчик нажатия (tap gesture) у UIView в Swift?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 ответов</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/ru/forum4654"
                               class="sidebar-question"
                               title="Что такое // MARK в Swift и как правильно использовать эту директиву в Xcode?">
                                <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_junior39                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Что такое // MARK в Swift и как правильно использовать эту директиву в Xcode?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 ответов</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/ru/forum4653"
                               class="sidebar-question"
                               title="Преобразование строки в дату (Date) в Swift: полное руководство">
                                <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_learner82                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Преобразование строки в дату (Date) в Swift: полное руководство                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 ответов</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/ru/forum4652"
                               class="sidebar-question"
                               title="Извлечение совпадений регулярных выражений в Swift">
                                <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_me36                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Извлечение совпадений регулярных выражений в Swift                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 ответов</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/ru/forum4651"
                               class="sidebar-question"
                               title="Сколько уровней вложенности указателей может быть в C++?">
                                <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">
                                        stack_user85                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Сколько уровней вложенности указателей может быть в C++?                                </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="/ru/forum1666">
                <span class="prelink-block__name"> Как плавно прокрутить страницу к нужному элементу с помощью jQuery?</span>
      </a>
                <a class="prelink-block__item" href="/ru/forum3482">
                <span class="prelink-block__name"> Объявление и инициализация словаря (Dictionary) в TypeScript</span>
      </a>
                <a class="prelink-block__item" href="/ru/forum1356">
                <span class="prelink-block__name"> Как обнаружить и предотвратить циклы в генеалогическом дереве на C++?</span>
      </a>
                <a class="prelink-block__item" href="/ru/forum3132">
                <span class="prelink-block__name"> event.preventDefault() vs return false: в чем разница в обработке событий?</span>
      </a>
                <a class="prelink-block__item" href="/ru/forum4398">
                <span class="prelink-block__name"> Ошибка "cannot move out of index of" в 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>