Кнопка скопировать текст, ссылку – на чистом JS

Ко мне и моим коллегам обращаются многие админы по поводу так называемого юзабилити сайта, а именно хотят добавить к важным текстовым или ссылкам кнопку скопировать содержимое… На данный момент подобные манипуляции способен выполнить любой мало-мальски приличный браузер – будь то мобильный, или десктопный. Однако, как говорят заказчики, подобными “плюшками” управления обозревателем мало кто заморачивается и потому нужна банальная кнопка!..

 

Я не знаю насколько требования пользователей обоснованы, но раз есть запрос, то должен быть предложенный вариант. А посему…

…а посему сегодня обозначим тему по реализации кнопки Скопировать – на чистом JS…

 

 

 

 

В общем, все это по теме простейшие решения JS:

 

 

Кнопка Скопировать на чистом JS

 

 

Реализуется сама кнопка (или точнее ее функционал) запросто в WordPress:

 

Например, возможно поместить такой небольшой скрипт (функции) в подвал той страницы, на которой должна быть реализована такая фичаsss)

 

 

if (is_single()) { //только для статей ?>
<script type="text/javascript">
function urlCopyTxt(){
var copy_url = document.URL; //КАК ВАРИАНТ: определяем текущие данные text, button или же input или url
navigator.clipboard.writeText(copy_url); //копируем в буфер
//$( '.coupon-alert' ).fadeIn( 'slow' ); //вариант всплывающей кнопки скопировано
//alert( 'СКОПИРОВАНО !! ' + copyText.value); //это всплыв подсказка в DOM - табличка вверху окна браузера
}
</script>
<?php }

 

 

Затем всего-то и потребуется что обернуть, например, ссылку, которую нужно скопировать по клику:

 

 

<span onclick="urlCopyTxt()">link или текст или функция</span>

 

 

…если нужно сообщение “Скопировано” на фронте сайта.

 

.coupon-alert организуйте стили… Пример css (см. ниже) особо давать не буду, т.к. сейчас все можно отыскать в сети конкретно по своим требованиям.

 

 

<div class="coupon-alert">Скопировано</div>

 

 

может быть ID объекта – идентификатор возможно разместить наряду с class css…

 

 

размещаем js в отдельном файле

 

Я создал файл copy-cnop.js, помести его в директорию js шаблона и подключил:

 

сам коротенький скрипт:

 

 

function urlCopyTxt() {
var copy_url = document.URL;
navigator.clipboard.writeText(copy_url);
}

 

Примерное подключение – напрямую в fooтере:

 

<script src="/wp-content/themes/шаблон/js/copy-cnop.js"></script>

 

 

Готово!!

 

 

 

 

теория кода JS кнопки Скопировать

 

 

Строка var copy_url = document.URL; – это один из вариантов определения документа на странице. Или как-нить так:

 

 

document.getElementById("url").textContent = document.URL;

 

 

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

 

 

На мой взгляд, самым важным для понимая в этом примере является navigator.clipboard.writeText( 'text' ); или как в примере: navigator.clipboard.writeText(copy_url);

 

 

navigator – здесь, скажем так, глобальный объект сбора информации о браузере и ос.

 

clipboard – ну а это свойство объекта navigator, определяет и, в данном случае, запрашивает доступ к Clipboard API (буферу обмена). Таким образом реализуются операции копирования, копирования и вставок объектов.

 

writeText() возвратит Promise (“промисы” – задачи асинхронного кода); успешное выполнение обрабатывается с помощью then() и catch() на уровне ошибок…

 

здесь URL (свойство) возвращает полный URL-адрес, который, соответственно – копируется!..

 

 

Все это наше кнопочное богатство возможно поместить в button или же в блок input или же, как в примере, span, а может быть и по ID (об этом см. ниже) – определяем дизайн с помощью css. Для чего это я говорю? а для того, что …

 

второй вариант JS функции кнопки Скопировать

 

 

<script>
var text = document.getElementById( 'inputText' );
var btn = document.getElementById( 'copyText' );
btn.onclick = function() { //событие onclick
text.select(); //возвратит копию тзначения text со всеми символами
document.execCommand( 'copy' ); //если с DOM
$( '.coupon-alert' ).fadeIn( 'slow' ); // вариант всплывающей подсказки Скопировано
// alert( 'СКОПИРОВАНО !! ' + copyText.value); // это всплыв подсказка DOM
}</script>

 

 

Кнопки организуем так:

 

<button id="copyText">Копировать</button><div class="coupon-alert">Скопировано</div>

 

 

CSS стили кнопок:

 

.coupon-alert {
display: none;
background-color: #02abe8;
font-weight: bold;
font-size: 14px;
color: white;
border-radius: 4px;
top: 4px;
padding: 7.5px 0;
position: relative;
}

 
#copyText {
color: white;
cursor: alias;
border: none;
padding: 2.3px 4px;
}

организация функционала копирования в шорткод

 

 

Принцип обработки функции Копирования по клику (click) сводится к тому, что мы организуем (создаем) функцию шорткода, в который соответственно оборачиваются данные для возможности копирования. Об создании и использовании шорткодов на сайте много написано.

 

вкратце:

 

 

[shorts] ...текст...[/shorts]

 

 

на экране появится “возможность” скопировать данные по клику, без вызова функционала браузеров…

 

 

Почему в шорткод? а потому, что, если, к примеру, вы решите через какое-то время изменить функции кнопки копирования, то в этом случае потребуется всего лишь изменить функционал одного лишь шорткода! тогда как если “обертку” вставлять прямо в тело статей, то замена ее будет стоить дороже!.. (если не разбираться в sql запросах к Базе Данных, которые значительно сокращают наше время). Так что рекомендую ознакомиться с этой статьей о полезных запросах!..

 

 

 

 

справка по браузерам: (скрин может несколько устарел, но суть ясна… В будущем, думаю показатели будут, что естественно, увеличиваться, так что) …