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

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

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

Пример:

Текст 1

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

Текст 2

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

HTML:

JS:

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

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

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

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

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

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

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

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

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

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

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

  • Ильдар Хакимов:

    Подскажите пожалуйста, как с наименьшим количеством кода показать пользователю, что текст скопировался? Может в поле на 0,5 секунд вывести текст "Скопировано", а через 0,5 секунд вернуть что было. Это нормальное решение или могут возникнуть проблемы?

    Ответить
    • Alexander:

      Можно повесить сообщение над/под кнопку "копировать", а по клику на ней показывать, например так:

      $('.message').fadeIn().fadeOut('slow');
      Ответить
      • Ильдар Хакимов:

        В таком случае приходится вручную прописывать span с текстом "Скопировано", хотелось бы, чтобы функция создала такой span и вывела её над точкой, в которой был клик.

        Ответить
        • Alexander:

          Можно как-нибудь так:
          CSS

          .message {
          	position: absolute;
          	display: none;
          }

          HTML в подвал перед боди закрывающим:

          <div class="message">Скопировано</div>

          jQuery:

          $('.copy').on('click', function(e) {
          	$('.message').css({ "top": e.pageY, "left": e.pageX })
          	$('.message').fadeIn('fast').delay(800).fadeOut('slow');
          });

          Но лучше, и красивее будет, просто найти кнопку анимированную, например:
          ссылка

          Ответить
          • Ильдар Хакимов:

            Решил менять текст на кнопке, но не могу понять как вернуть текст "Скопировать" на кнопке через 500 миллисекунд:

            function copytext(el) {
            $(el).select();
            document.execCommand("copy");
            $('#copyButton').fadeOut(100).attr('value', 'Скопировано!').fadeIn(100);
            }    
            
            Ответить
            • Alexander:

              Ниже добавьте просто:

              setTimeout("$('#copyButton').attr('value', 'Скопировать')", 500);
              Ответить
  • Юрий:

    Здравствуйте.
    Спасибо за код, работает, копирует. Но у меня даже с textarea копирует одной строкой. Может быть, есть ещё условия, чтобы соблюдался перенос строк?

    Ответить
    • Alexander:

      Тут скорее всего вопрос в другом, что копируется а не как.
      Это одна строка:

      <p>Текст</p><p>Текст</p>

      И это:

      <p>Текст<br>Текст</p>

      А это две строки

      Текст
      Текст

      Хотя на странице такой код будет выглядеть наоборот

      Ответить
      • Юрий:

        Блин, всю голову поломал, а забыл, что мобильный браузер не умеет обновляться через Ctrl+F5. И пока я не почистил историю и не перезапустил браузер, ничего не работало. Сейчас всё отлично, извините за беспокойство.

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

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

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

      От это я балда, только сейчас досмотрелся что в коде прописан 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:

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

          Ответить