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

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

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

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

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

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

Реализация

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

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

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

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

Встраиваем в форму drug-n-drop загрузчик файлов

Май 8, 2017 г.

Загрузка файлов, наверное, самая сложная тема при работе с формами в веб-приложениях. Стандартный элемент формы <input> для загрузки файла, его внешний ...

Читать

Виджетик для сравнения двух картинок

Ноябрь 1, 2015 г.

Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений ...

Читать

 

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