Копирование текста в буфер обмена по клику

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

В данном примере этот текст берется не из полей формы, а со страницы.

Пример:

Текст 1

При нажатии на соответствующую кнопку ниже скопируется этот текст

Текст 2

Или этот, если нажать другую.

HTML:

JS:

Подключаем библиотеку jQuery и:

Копирование происходит через функцию copytext(element), например:

<button onclick="copytext('#text1')">Добавить в буфер</button>

Если в копируемом тексте не нужны переносы строк, то вместо:

var $tmp = $("<textarea>");

нужно написать:

var $tmp = $("<input>");

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Жека:

    Новая проблемка нарисовалась, при копировании кода, все превращается в "кашу" форматирование не сохраняется… Неудобно потом разгребать… Как решить проблему не пойму. Может есть идеи в кого?

    Ответить
    • Жека:

      От это я балда, только сейчас досмотрелся что в коде прописан input

      Ответить
  • Жека:

    Приветствую. Такая ситуация возникла: нужно дать посетителю возможность скопировать какой-то код (хтмл, цсс, скрипт) но при вставке кода ОН СРАБАТЫВАЕТ, т.е вместо например кода и стилей (которые должен скопировать посетитель) он копирует конечный результат, но не сам код.

    Вопрос: как вставить именно код (текстом) и дать возможность его скопировать? Пробовал закомментировать код через <!— но тогда копируется пустота … Печально, не могу ничего придумать, может что подскажете? Спс.

    Ответить
    • Alexander:

      А как выглядет конечный результат, который копируется?
      И лучше конечно поглядеть визуально, как у вас что работает

      Ответить
      • Жека:

        Сам написал вопрос — сам покопался и решил проблемку Решил с помощью <xmp> и комментирования через <!— так что все в порядке, а за кодик спасибо, реально пригодился

        Ответить
  • Nazar:

    Спасибо а как копировать текст 1 и текст 2 одной кнопкой как сделать?

    Ответить
    • Alexander:

      Использовать вместо ID одинаковый для копируемого текста класс.

      Ответить
  • женя:

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

    Ответить
    • Alexander:

      Нормально они копируются, только куда их потом втыкать вопрос.
      Если в блокнотик, например, то он отображает их не все, ровно как и хром.

      Ответить
  • женя:

    Автор, напиши что библиотеку еще подключить надо, чтобы народ был в курсе)
    Эту например

    https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
    Ответить
  • женя:

    скопировал и сделал как на примере. не работает в итоге. может я что-то делаю не так. хотя все просто копирую как у автора. жаль то не вышло. буду искать еще.

    Ответить
    • Alexander:

      Это чтобы контент не копипастили? 🙂
      Ну чтобы прям отключить, это я думаю врядли возможно, но похимичить что нибудь можно.
      Первый делом нужно отключить правую кнопку мыши, а потом, запретить, например, выделение текста или повесить другое событие на CTRL + C

      $(document).keydown(function(e) {	
      if (e.ctrlKey && e.keyCode === 67) {
          var $tmp = $("<input>");
          $("body").append($tmp);
          $tmp.val("Скопировали не то, что выделили").select();
          document.execCommand("copy");
          $tmp.remove();
        }
      });
      Ответить
  • Евген:

    Большое спасибо, очень помогло!

    Ответить
  • Константин:

    Доброго дня.
    Если возможно, объясните пожалуйста каждую строку кода js, буду очень вам благодарен.

    Ответить
    • Alexander:

      Как то так

      function copytext(el) {
       var $tmp = $("<textarea>"); 
       $("body").append($tmp); // Вставляем временную переменную с полем для ввода
       $tmp.val($(el).text()).select(); // Вставляем в это поле данные нужного элемента и выделяем
       document.execCommand("copy"); // Копируем эти данные
       $tmp.remove(); // Удаляем временную переменную
      }
      Ответить
      • Константин:

        Спасибо за ответ

        var $tmp = $("<textarea>");
        я понимаю эту строку, как поиск тега <textarea>
        у меня на странице данного тега нет
        такой строкой я могу любой тег в переменную положить?

        select() — это выделить текст? Друг гугол не отвечает на этот вопрос)

        document.execCommand("copy"); — как этот метод понимает, что нужно скопировать наши данные?

        Ответить
        • Alexander:

          я понимаю эту строку, как поиск тега <textarea>

          Нет, это создание переменной с ней (потом ее и вставляем)
          Чтобы не вставлять 3 раза $("<textarea>")

          select() — это выделить текст? Друг гугол не отвечает на этот вопрос)

          Да, это выделяет потом то что создали и куда вставили.

          document.execCommand("copy");

          А это копирует то что выделили

          Ответить
        • Alexander:

          Метод select() используется с элементом <input> (с текстовым типом type = "text") и элементом <textarea>.
          Поэтому нам и приходится создать такой временный элемент, воткнуть туда текст из нужного нам элемента, потом выделить, скопировать в буфер и удалить все это

          Ответить
  • Алина:

    А как убрать расстояние между двумя кнопками?

    Ответить
      • Антон:

        У меня копирование получается на ноутбуке, а на телефоне в safari не как не получается. Что можно сделать? Спасибо!!!

        Ответить
        • Alexander:

          Ну это уже от браузера зависит.
          Читать нужно именно про мобильные.
          Скорее всего не дает он копировать из соображения безопасности какой то.

          Ответить