jQuery. Копирование в буфер обмена.

Реализация на jQuery копирование текста по клику на него. Пример кода, описание и демонстрация.


В некоторых проектах возникает необходимость дать возможность скопировать в буфер обмена рекомендуемый текст, ссылку, промокод просто кликнув на него. Желательно после копирования получить подтверждение в виде всплывающего окошка с подтвеждением копирования. Вот как на эту тему мне ответил AI ChatGPT:

 Нужен код JS или jQuery для копирования текста в буфер обмена по клику на этот текст и оповещением о удачном копировании в буфер обмена словом "скопировано!".

  Вот как можно реализовать такую функцию в JavaScript с помощью библиотеки jQuery:

JS
$(document).ready(function() {
  $('.copy-text').click(function(){
    var textToCopy = $(this).text();
    copyToClipboard(textToCopy);
    alert('Скопировано');
  });
});

function copyToClipboard(text) {
  var $temp = $('<input>');
  $('body').append($temp);
  $temp.val(text).select();
  document.execCommand('copy');
  $temp.remove();
}

Этот код добавляет обработчик событий на все элементы с классом "copy-text". При клике на элемент, текст внутри него копируется в буфер обмена с помощью функции `copyToClipboard`. Затем происходит оповещение об успешном копировании с помощью функции `alert()`. Функция `copyToClipboard` создает временный элемент DOM типа input, копирует текст в него и затем выделяет весь текст внутри элемента. Далее используется команда `document.execCommand('copy')`, чтобы скопировать текст в буфер обмена, после чего временный элемент удаляется из DOM

Вы можете изменить селектор на любой другой, если вы хотите применить данную функцию не только к элементам с классом "copy-text", а к другим элементам на странице.

 Чтобы немного облагородить вывод информации об успешном копировании в буфер обмена я заменил alert('Скопировано') на функцию copyInfo(info), которая выводит сообщение в всплывающем окне используя JS библиотеку sweetalert2. Вот дополненный код:

JS
$(document).ready(function() {
  $('.copy-text').click(function(){
    var textToCopy = $(this).text();
    copyToClipboard(textToCopy);
    copyInfo('Скопировано!');
  });
});

function copyToClipboard(text) {
  var $temp = $('<input>');
  $('body').append($temp);
  $temp.val(text).select();
  document.execCommand('copy');
  $temp.remove();
}

function copyInfo(info){
     Swal.fire({
            icon: 'success',
            title: info,
            showConfirmButton: false,
            timer: 1500
          })
}

Статья подготовлена с помощью AI ChatGPT / GPT-4 ассистент

Дата публикации: 

ТОП 10 случайных публикаций



Сайт разработан студией © WEB-VidST   


Яндекс.Метрика