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

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

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

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

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

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

Реализация

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

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

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

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

Показ навигации и пагинатора swiper js за пределами контейнера

Апрель 11, 2018 г.

swiper js - jQuery плагин для создания адаптивной карусели  картинок. Посмотрим как сверстать шаблон так, чтобы элементы управления слайдером можно было размещать за пределами контейнера слайдера. SWIPER на GITHUB. Это стандартный шаблон, который ...

Читать

Кастомизация infoWindow на картах гугл

Январь 25, 2018 г.

Поп-ап на картах гугл, объект google.maps.InfoWindow, привлекателен возможностью вставки в него собственного 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? Попробуйте в конце не снимать выделение — будет видно, что действительно выделяется на странице и соответственно копируется в буфер.

      • 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.»