Дописываем ссылку при копировании текста на странице

Информация имеет свойство текучести, если говорить об информации на сайтах, то к примеру статья, опубликованная на одном из сайтов может разлететься по всему интернету. Почему это происходит? Наверное, потому, что материал, изложенный вами, кому-то очень понравился, и его захотели «скопипастить» на свой сайт. Так или иначе, для владельцев сайта это представляется не очень приятным явлением.

Давайте посмотрим, что можно предпринять, чтобы повлиять на эту ситуацию. По этому поводу велось много дискуссий, и одним из вариантов решения было отключение контекстного меню, плюс запрет на копирование посредством клавиатуры. Вроде бы не плохо, не работает контекстное меню, и не копируется через клавиши, но в реальности получается всё по-другому.

Тот, кто занимается копированием статей с сайтов, скопирует содержимое без труда, путем небольших манипуляций в браузере, а основные неудобства уже приходятся на пользователей, которые возможно захотят скопировать строчку либо пару слов, чтобы не набирать это вручную.

На нашем сайте множество примеров с листингом кода, элементарно желающие воспользоваться неким куском кода, в целях экономии времени могут захотеть скопировать этот код, чтобы не набирать вручную. Представим ситуацию, когда мы пытаемся запретить копировать текст: кликают правой кнопкой мыши — контекстное меню не работает, пробуют Ctrl+C тоже не пашет, досадная ситуация не так ли, и даже при самых оптимальных прогнозах пользователь остается на сайте и набирает этот код вручную. Это ни есть хорошо.

Полностью защитить текст на сайте от копирования не удастся, стоит это понимать, прибегать к таким мерам как отключение контекстного меню идея в некотором роде не лучшая. В конечном итоге можно попросить оставлять ссылку на статью при копировании материалов с сайта. А ещё интереснее дописывать ссылку на статью в конце текста при копировании, об этом речь пойдет далее.

Данный механизм наводит на мысль что надо дописать нужную строку со ссылкой в буфере обмена. Однако на самом деле в из соображений безопасности «залезть» в буфер обмена через браузер средствами js нельзя. Но есть альтернативный способ, с помощью которого можно приписать ссылку в конец текста ещё до копирования, и при этом визуально её видно не будет естественно.

Для реализации этой задачи мы будем использовать JQuery плагин addToCopy. Скачать zip-архив с файлами скрипта вы можете тут, либо поискать его в поисковике.

Подключаем файлы скриптов:

<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="addtocopy.js"></script>
<script type="text/javascript">
$(function(){
	$("#content").addtocopy({
	htmlcopytxt: '<br>Подробнее: <a href="'
		+ window.location.href +
		'">'+window.location.href+'</a>'
	});
});
</script>

Стиль:

<style type="text/css">
#ctrlcopy {
	color:transparent;
	height:1px;
	overflow:hidden;
	position:absolute;
	width:1px;
}
</style>

Текст на странице помещается в контейнер:

<div id="content"></div>

Стоит отметить особенность работы данного скрипта. В файле addtocopy.js есть параметр, который указывает на количество символов, при котором добавление ссылки в конце не происходит. Т.е. к примеру, если стоит величина 20 символов, при копировании строки меньше 20-ти символов, ссылка добавляться не будет.
Пример работы скрипта.