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 ассистент
ТОП 10 случайных публикаций
Последние публикации
