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

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

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

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

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

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

Реализация

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

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

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

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

Устанавливаем видео с youtube/vimeo на задний фон

Октябрь 14, 2017 г.

Речь пойдет об jQuery плагинах YTPlayer и Vimeo_player. Сложно что либо добавить к официальным описаниям на github и демосайтах, т.к. подключение и использование не отличается от многих других jQuery плагинов. Плагины позволяют подставить в бекграунд ...

Читать

Программируем галерею в Drupal 7

Сентябрь 2, 2015 г.

Хотите сделать галерею своими руками, без сторонних модулей в Drupal? Тогда читайте дальше. Настроим поле для галереи Для начала нам надо определиться, ...

Читать

 

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