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

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

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

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

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

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

Реализация

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

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

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

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

Исправление плагина jquery.jslider.js

Июнь 8, 2017 г.

Использую в одном из проектов замечательный плагин для ввода диапазона значений, который, к сожалению, не поддерживается больше разработчиком. Он содержит ...

Читать

Когда jQuery.find может не работать

Декабрь 8, 2012 г.

Обычно, "проблема" возникает с данными, получаемыми через асинхронные запросы (ajax-запрос). Вы пытаетесь выполнить jQuery.find() для полученных данных, а функция возвращает пустой объект. В примере ниже, мы пытаемся извлечь содержимое HTML контейнера ...

Читать

 

Комментарии к «Копируем в буфер обмена средствами 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? Попробуйте в конце не снимать выделение — будет видно, что действительно выделяется на странице и соответственно копируется в буфер.

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

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