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

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

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

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

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

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

Реализация

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

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

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

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

Перехват ошибок на front-end с помощью js

Январь 24, 2021 г.

Некоторые ошибки происходят на стороне пользователя и не попадают в логи на сервере. В этом могут быть виноваты настройки сети, плагины браузера, которые установил пользователь, политики безопасности или антивирус, которые блокируют загрузку некоторых ...

Читать

Обратный порядок перебора элементов jQuery each()

Сентябрь 17, 2019 г.

Полезное ноу-хау для тех кто пользуется jQuery. Функция $.each() производит перебор элементов по порядку, но иногда требуется выполнить операции в обратном порядке. jQuery ничего не предлагает для реализации нашей задачи, но это и не требуется, ...

Читать

 

Комментарии к «Копируем в буфер обмена средствами 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