jQuery. Копирование в буфер обмена.
Реализация на jQuery копирование текста по клику на него. Пример кода, описание и демонстрация.
В некоторых проектах возникает необходимость дать возможность скопировать в буфер обмена рекомендуемый текст, ссылку, промокод просто кликнув на него. Желательно после копирования получить подтверждение в виде всплывающего окошка с подтвеждением копирования. Вот как на эту тему мне ответил AI ChatGPT:
Нужен код JS или jQuery для копирования текста в буфер обмена по клику на этот текст и оповещением о удачном копировании в буфер обмена словом "скопировано!".
Вот как можно реализовать такую функцию в JavaScript с помощью библиотеки jQuery:
$(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. Вот дополненный код:
$(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 ассистент