Копируем в буфер обмена средствами javascript

Такая задача возникает не часто, но если вы заботитесь о пользователе, и помогаете ему скопировать в буфер обмена нужную информацию — то пользователь будет вам признателен. Так вы заработаете ещё один плюсик в копилку «юзабилити».

Разберем ключевые моменты задачи.

Постановка задачи

Есть какой то участок html кода, ограниченный известным контейнером, это может быть текст в textarea или внутри div, который нужно передать в буфер обмена по событию, инициированному пользователем. Пусть это будет нажатие (click) на кнопку.

Вот пример html кода:

Реализация

Описанные ниже способ хоть и работает, но считается устаревшим после внедрения Clipboard API — читайте о его использовании тут.

Мы будем использовать функцию window.getSelection(), которая предоставляет доступ к объекту выделения текста на странице. А также функцию document.execCommand(), чтобы выполнить собственно перенос скопированного участка в буфер обмена. Потом мы будем снимать выделение текста, так что пользователь даже и не заметит, что мы что то выделяли :)

Обойдемся без jQuery, только чистым javascript.

Написать комментарий

Мало букафф? Читайте есчо !

Копирование текста в буфер обмена на js

Март 12, 2024 г.

Есть устаревший способ, с которым можно ознакомиться здесь, а ниже мы рассмотрим рекомендуемый подход. Для работы с буфером обмена был внедрен Clipboard API. Он позволяет не только двунаправленно работать с буфером обмена, но также и обрабатывать ...

Читать

 

Комментарии к «Копируем в буфер обмена средствами javascript»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

Много комментариев в “Копируем в буфер обмена средствами javascript”

  1. Роман:

    Здравствуйте,
    Сделал по аналогии, но почему-то копируется не тот текст, который должен, а тот, на который происходит клик.
    Подскажите, пожалуйста, что я делаю не так?

    //цепляем событие на onclick кнопки
    var button = document.getElementById(‘copy-upc’);
    button.addEventListener(‘click’, function () {
    //нашли наш контейнер
    var ta = document.getElementById(‘upc’);
    //производим его выделение
    var range = document.createRange();
    range.selectNode(ta);
    window.getSelection().addRange(range);

    //пытаемся скопировать текст в буфер обмена
    try {
    document.execCommand(‘copy’);
    } catch(err) {
    console.log(‘Can`t copy’);
    }
    //очистим выделение текста, чтобы пользователь «не парился»
    window.getSelection().removeAllRanges();
    });

    • Судя по js коду, вроде всё в порядке. По логике, eсть два контейнера, один для кнопки — #copy-upc, а второй для копирования — #upc.
      Может что то в HTML коде не так? К примеру, контейнеры с одним и тем же ID? Попробуйте в конце не снимать выделение — будет видно, что действительно выделяется на странице и соответственно копируется в буфер.

      • Alik:

        create
        copy

        function makeF() {
        var c=document.getElementById(‘countri’).value;
        document.getElementById(‘tex’).value=»function «+c+»()»+»{«+»\n»+»}»;
        }
        function copyF() {
        var s = document.getElementById(«tex»).value;
        var r=document.createRange();
        r.selectNode(s);
        window.getSelection().addRange(s);
        document.execCommand(‘copy’);
        }

        и не работает, ничего не выделяет вообще, или это к тексту в textarea не применимо?

  2. Александр:

    Доброго времени суток.
    Есть задача: в серверном скрипте получить данные из буфера обмена и передать их в браузер. Возможно ли это сделать с помощью javascript или требуется что-либо другое?

  3. Геннадий:

    Здравствуйте! Почему то, если просто покликать мышкой по другим местам на странице (в том числе пустым), то потом ничего не копирует. А если кликнуть потом по месту которое нужно выделить, то в консоли выдает ошибку «The behavior that Selection.addRange() merges existing Range and the specified Range was removed.»

    • Геннадий:

      В общем нужно просто перед выделением снять старое выделение
      window.getSelection().addRange(range);

  4. Andrews32:

    Спасибо, всё работает!
    По желанию, в конец скрипта можно добавить
    alert(«Текст скопирован!»);

  5. Александр:

    Здравствуйте!
    Может кто подскажет, как сделать кнопку вставить скопированный текст из буфера обмена?

  6. Andrews32:

    Немного изменил ваш скрипт, чтобы можно было копировать из разных мест на странице, не плодя клонов одной и той же функции:

    <a href=»#» rel=»nofollow»>Копировать из первого дива</a>
    <a href=»#» rel=»nofollow»>Копировать из второго дива</a>

    111
    222

    jQuery(‘.js_copy_to_clipboard’).click(function() {
    var where_to_copy = jQuery(this).attr(«data-copy-from-id»);
    var what_to_copy = document.getElementById(where_to_copy);
    var range = document.createRange();
    range.selectNode(what_to_copy);
    window.getSelection().addRange(range);
    try { document.execCommand(‘copy’);
    } catch(err) { console.log(‘Не удалось скопировать текст в буфер обмена!’); }
    window.getSelection().removeAllRanges();
    jQuery(this).text(‘Скопировано!’);
    });

    Но тогда, если сначала скопировал по одной ссылке, затем по другой, второй раз не копировалось и в консоли возникала ошибка:
    Discontiguous selection is not supported.

    Проблема решилась добавлением ещё раз этой строчки
    window.getSelection().removeAllRanges();
    в начало скрипта:

    jQuery(‘.js_copy_to_clipboard’).click(function() {
    window.getSelection().removeAllRanges(); // вот она!
    var where_to_copy = jQuery(this).attr(«data-copy-from-id»);
    var what_to_copy = document.getElementById(where_to_copy);
    var range = document.createRange();
    range.selectNode(what_to_copy);
    window.getSelection().addRange(range);
    try { document.execCommand(‘copy’);
    } catch(err) { console.log(‘Не удалось скопировать текст в буфер обмена!’); }
    window.getSelection().removeAllRanges();
    jQuery(this).text(‘Скопировано!’);
    });

  7. Денис:

    Не копируются переносы строк \n