Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsЕЩЁ

Скопировать ссылку JS

Сегодня мы будем копировать ссылку в js. Естественно, что скопировать ссылку нам потребовалось не просто так! как впрочем и всегда! У нас есть отдельная тема, где мы немного пытаемся разобраться вообще с копированием в javascript - пока для меня, немного мутная тема!

Длинный путь познания начинается с первого шага!

Навигация по странице :
  1. Скачать скрипт clipboard
  2. Подключаем скрипт для копирования ссылки clipboard.
  3. Копирование ссылки javascript которая выведена текстом
  4. Копирование ссылки javascript из атрибута
  1. Скачать скрипт clipboard

    Первым шагом к копированию ссылки нам нужен скрипт, который распространяется пока бесплатно -> ссылка разработчика.
  2. Подключаем скрипт для копирования ссылки clipboard.

    Скачали скрипт для копирования, бросаем куда-тов папку на сервере с помощью ftp

    <script src="путь до файла/2.0.0.clipboard.min.js"></script>

    У нас код подключения вот такой:

    <script src="https://dwweb.ru/__a-data/js/2.0.0.clipboard.min.js"></script>

    И далее основной скрипт копирования ссылки:

    <script>

    var clipboard = new ClipboardJS('.toCopy');

    clipboard.on('success', function(e) {

    new_text = ('Text:', e.text); alert('Скопировано : ' + new_text);

    e.clearSelection();

    });

    clipboard.on('error', function(e) {

    alert('не скопировано');

    });

    </script>

  3. Копирование ссылки javascript с id

    Далее один из способов копирования ссылки - например у нас есть тег ссылки:

    Необходимые условия для копирования ссылки из данного тега наличие id!

    <a href="здесь ссылка..." target="_blank" id="my_copy">здесь текст ссылки</a>

    Далее нам понадобится кнопка, которая и будет производить копирование!

    Обязательное наличие class="toCopy" + data-clipboard-target="#my_copy", где my_copy - это ид из ссылки

    <button class="toCopy" data-clipboard-target="#my_copy">Скопировать</button>

    Теперь... соединим весь код для копирования вместе, как это должно выглядеть в коде(копировать ссылку будем там, где выделено красным!):

    <script src="путь до файла/2.0.0.clipboard.min.js"></script>

    <script>

    var clipboard = new ClipboardJS('.toCopy');

    clipboard.on('success', function(e) {

    new_text = ('Text:', e.text); alert('Скопировано : ' + new_text);

    e.clearSelection();

    });

    clipboard.on('error', function(e) {

    alert('не скопировано');

    });

    </script>

    <a href="здесь ссылка..." target="_blank" id="my_copy">здесь ссылка...</a>

    <button class="toCopy" data-clipboard-target="#my_copy">Скопировать</button>

    Результат;

    https://dwweb.ru/page/js/019_ckopirovat_ssyilku_js.html

  4. Копирование ссылки javascript из атрибута

    Опять же будем использовать скрипт clipboard.js, теперь создадим, например кнопку - это не обязательно должна быть кнопка, можно просто див.

    Нам снова понадобится класс - class="toCopy" и добавим в кнопку атрибут data-clipboard-text, созначением копируемой ссылки, итого у нас получилось:

    <button class="toCopy" data-clipboard-text="https://dwweb.ru/page/js/019_ckopirovat_ssyilku_js.html#paragraph_5">Скопировать ссылку</button>

    Второй раз объявлять и запускать clipboard.js не будем, мы уже один раз это сделали!

    И результат:


Вас может еще заинтересовать список тем : JS , JS_COPY ,
Последняя дата редактирования : 2020-01-19 06:47
Название скрипта :Скопировать ссылку JS
Скрипт № 55.1Ссылка на скачивение: Все скрипты на одной странице
Теги:
скопировать ссылку скопировать ссылку Jsскопировать ссылку javascript

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020