Добавьте специальное сообщение на случай, если пользователь скопирует текст!
Хотели ли вы когда-нибудь добавить специальное сообщение или указание авторства, когда пользователи копируют текст с вашего сайта? Например, когда пользователи выделяют текст и нажимают Ctrl + C, вы можете захотеть указать оригинальный веб-сайт. Таким образом, если пользователи вставят содержимое в другое место, они увидят сообщение, подобное этому:
The original text
Copied from https://www.yourwebsite.comВ этом обзоре мы узнаем, как добиться такого специфического поведения с помощью JavaScript DOM. Как правило, такое поведение не применяется ко всей странице. Вместо этого оно используется, когда пользователи копируют текст из основного раздела содержимого страницы. Будем считать, что в разметке есть элемент с id content.
<div id="content">
...
</div>Итак, давайте погрузимся в работу!
Чтобы выбрать элемент с помощью JavaScript, мы можем использовать метод getElementById или любой другой метод, подходящий для ваших нужд.
const contentEle = document.getElementById('content');Обработка события копирования
Теперь пришло время обработать событие copy, которое происходит, когда пользователь копирует текст.
contentEle.addEventListener('copy', (e) => {
// We will add a custom message here ...
});Изменение данных в буфере обмена
В слушателе событий мы можем изменять данные, которые копируются в буфер обмена, используя свойство ClipboardEvent.clipboardData.
К сожалению, выделенный текст нельзя получить с помощью функции clipboardData.getData(). Он доступен только при обработке других событий, таких как вставка.
К счастью, есть другой способ получить выделенный текст: с помощью API выделения. Вызвав window.getSelection().toString(), мы можем получить точный текст, который был выделен пользователем.
Обработчик события копирования может выглядеть следующим образом:
element.addEventListener('copy', (e) => {
const clipboardData = e.clipboardData;
const originalText = window.getSelection().toString();
if (!originalText) {
return;
}
// Modify the clipboard data
e.preventDefault();
clipboardData.setData('text/plain', originalText + '\n\n' + 'Copied from https://yourwebsite.com');
});В этом примере мы добавляем новую строку с пользовательским сообщением Copied from https://yourwebsite.com к оригинальному копируемому тексту. Затем мы помещаем обновленную копию обратно в буфер обмена с помощью функции clipboardData.setData().
Но вот что важно: не забудьте запретить стандартное поведение события copy. Это позволит не копировать оригинальный текст в буфер обмена без пользовательского сообщения.
e.preventDefault();Помимо использования API буфера обмена, есть и другой способ сохранить текст в буфер обмена. Ознакомьтесь с этой статьей, чтобы узнать больше.
Вуаля! С помощью нескольких строк кода JavaScript DOM вы можете добавить пользовательское сообщение в текст, который пользователи копируют с вашего сайта.
Спасибо за внимание! Счастливого кодинга!
