При копировании ссылка html

Скопировать текст в буфер обмена нажатием на кнопку

Задача простая — копировать текст из какого-то блока нажатием кнопки, например, это может быть код купона или ссылка на статью в конце самой статьи. Согласитесь — довольно таки удобно, вместо выделения и копирования просто нажать одну кнопку и нужный текст уже в буфере обмена.

Самый простой и примитивный HTML для примера:

 
 Чтобы не загружать мозг лишним кодом, в CSS будет только одно правило для скрытия сообщения об удачном копировании:

Ну и самая главная часть — скрипт, который выполнит всю работу:

$(function() < // copy content to clipboard function copyToClipboard(element) < var $temp = $(""); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); > // copy coupone code to clipboard $(".coupon-btn").on("click", function() < copyToClipboard("#coupon-field"); $(".coupon-alert").fadeIn("slow"); >); >);

Думаю, сильно подробно разбирать код нет смысла. Но в двух словах:

Функция copyToClipboard(element) скопирует в буфер содержимое заданного блока.

Копирование произойдет при нажатии на кнопку «.coupon-btn» .

copyToClipboard(«#coupon-field») — вызываем функцию copyToClipboard(element) и указываем, что нужно скопировать содержимое блока #coupon-field .

$(«.coupon-alert»).fadeIn(«slow»); — после копирования показываем сообщение, что что-то произошло и содержимое блока скопировано.

Ниже рабочий пример, в котором так же добавлено поле, чтобы вставить в него содержимое из буфера и проверить работоспособность кода:

Простая валидация email с помощью javaScript. Суть в том, чтобы не дать отправить форму, пока…

Рассмотрим 2 наиболее часто применяющихся примера. Для обоих примеров будет общий HTML: И общие правила…

Простой пример, как убрать стрелки в поле input[type=»number»] с помощью CSS: Важное дополнение: по прежнему…

Часто в мобильной версии сайта используется кнопка типа «бургера» для вызова основного меню сайта. На…

Источник

Как добавить ссылку на источник при копировании с сайта

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

А все это можно сделать при помощи не сложного скрипта, принцип работы которого:

При копировании материала (текста) на сайте, в самый конец добавляется ссылка на источник или так называемая автоматическая вставка копирайта.

Не очень внимательные пользователи, которые копируют материал себе на сайт или на форум, могут не заметить такой ссылки. Такая невнимательность играет только нам на руку — мы увеличиваем ссылочную массу на сайт.

Большинство пользователей замечают такой копирайт, и мы ни как не можем помешать им его удалить, но все-таки есть процент, кто не заметит.

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

Ниже приведу два варианта, как можно внедрить скрипт к себе на сайт.

Вставляем код между тегами и :

Создаем файл с расширением .js и копируем туда код ниже:

function MyCopyText() < var target_text = window.getSelection(), add_text = '
 
Источник: ' + document.location.href, out_text = target_text + add_text, fake = document.createElement('div'); fake.style.position = 'absolute'; fake.style.left = '-99999px'; document.body.appendChild(fake); fake.innerHTML = out_text; target_text.selectAllChildren(fake); window.setTimeout(function() < document.body.removeChild(fake); >, 100); >

Остается только подключить его к шаблону. Код ниже, нужно разместить между тегами и :

Например вы создали файл «no-copy.js» и скопировали туда скрипт. А сам файл поместили в папку «js», которая должна (можно создать) быть в папке шаблона.

Если вы сделали все правильно, то теперь при копировании любого текста на сайте, в самом низу будет ссылка на источник (на автора) материала.

Возможно вам так же будет интересно:

Если я Вам помог — оставьте свой отзыв или поделитесь сайтом с друзьями в социальных сетях!

Источник

При копировании ссылка html

Главная Часть 1. Создание блога Глава 8. Техническая часть Урок 139. Добавляем ссылку на источник материала при копировании

82 комментария
Категория:
Глава 8. Техническая часть, Часть 1. Создание блога
Автор: Sly

Урок 139. Добавляем ссылку на источник материала при копировании

Как и обещал в предыдущей статье, мы поговорим про автоматическое добавление ссылки на источник материала при копировании. Очень полезная вещь, особенно для тех, у кого часто копипастят контент. Копипастер частенько может недоглядеть, и не удалить ссылку, что очень положительно скажется на сайте-источнике. При использовании парсеров контента (программы для сбора материала), многие также забывают поставить галочку напротив «Удалять ‘a href’ ссылки». А в более старых версиях парсеров такой функции и вовсе нет. Отсюда хорошо видно, почему необходим скрипт, который будет добавлять к скопированному содержимому ссылку на источник и текст, который задаст сам админ.

Скрипт я написал своими руками, после того, как разочаровался во всех найденных. Только 1 скрипт мне попался рабочим, однако работал он лишь на опере. Мой же скрипт работает на всех современных браузерах: «Мазила, Опера, Хром, Яндекс Браузер и тд». На всех, кроме ИЕ (Internet Explorer). С этим браузером масса проблем, там плохо работают ява скрипты, большинство вообще не запускаются, как и мой. Не понятно, майкрософт специально игнорит подобные скрипты, якобы из соображений безопасности, или просто не видит проблемы? Не удивительно, почему ИЕ используют лишь для того, чтобы скачать какой-нибудь другой браузер 🙂

Что делает скрипт? В двух словах: копируем текст: не важно, 7 абзацев, или 2 слова, скрипт автоматически в буфере обмена (где хранится сохраненный текст) редактирует его, добавляя в конец 2 строки. Первая строка: адрес страницы, с которой был скопирован текст (автоматическое определение урла страницы расположения текста). Вторая строка: копирайт.

Источник

Как добавить в скопированный текст ссылку на источник?

Мне нужно вставить ссылку в текст, в определенное слово. В следующем коде я ищу в скопированном тексте последнее слово «собака» и делаю его ссылкой на источник.

function addLink() < var body_element = document.getElementsByTagName('body')[0]; var selection; selection = window.getSelection(); var pos = (''+selection).lastIndexOf("Собака"); var pagelink = "Собака"; String.prototype.replaceAt=function(index, character) < return this.substr(0, index) + character + this.substr(index+6); >var copytext = (''+selection).replaceAt(pos, pagelink); //alert(copytext); var newdiv = document.createElement('div'); newdiv.style.position='absolute'; newdiv.style.left='-99999px'; body_element.appendChild(newdiv); newdiv.innerHTML = copytext; selection.selectAllChildren(newdiv); window.setTimeout(function() < body_element.removeChild(newdiv); >,0); > document.oncopy = addLink;

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

Так вставляется в редактор:

у нас есть большая <a href='http://localhost/basic9/web/news/politics/2'>Собака</a>.

А так в обычное поле (по идее для редактора мне нужно тоже самое только в виде гиперссылки):

Источник

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

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

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

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

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

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

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

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

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

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

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

VK FB TW Whatsapp Telegram Email

Источник