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

Пример того что получится в итоге можно посмотреть нажав на кнопку ниже. Также можете скачать пример.

Если это то что вам нужно, то давайте приступим к теории, как это сделать. По сути вам надо сделать следующие шаги. Для начала нужно добавить нужному элементу класс - text_copy_link. Можно любой, но тогда нужно будет указать тот клас в скрипте, о котором немного позже.

Так же надо добавить на страницу блок с сообщением об успешном копировании. Это блок с классом - copy_link_mess. Текст внутри можете менять на любой. Пример того что надо добавить выглядит так:

<div class="text_copy_link">Текст или [shortcode] который скопируется</div>
<div class="copy_link_mess">Скопировано в буфер обмена</div>

Как я и сказал. Первый блок это тот, текст внутри которого копируется, а второй это блок с оповещением. Для него можно и нужно добавить стили CSS. Блок должен быть спрятан изначально и появляться лишь при клике по блоку с текстом.

Пример стилей выглядит так:

.copy_link_mess{
line-height:40px;
border-radius:5px;
background:#1DA1F2;
color:#fff;
position:fixed;
padding:0 15px;
z-index:99;
bottom:30px;
left:50%;
margin-left:-120px;
display:none;
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 15px;
}

Теперь очередь пришла к самому важному - jQuery скрипт, что будет выполнять всю работу. Но, перед его добавлением, нужно убедится, что к вашему сайту подключена библиотека jQuery. Если нет, то это нужно сделать. Можете воспользоваться статей Как и где подключить скрипт?, если не знаете как это сделать.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

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

И вот теперь, уже после библиотеки, можно подключить скрипт. Скопируйте его и добавьте в нужное место. Шапка или подвал сайта. Так же можно прямо на страницу после блока с сообщением об успешном копировании, если скрипт нужен только на одной странице.

Выглядит скрипт так:

<script>
jQuery(document).ready(function($){
$('.text_copy_link').click(function() {
var $text_copy = $(this);
var $temp = $("<input>");
$("body").append($temp);
$temp.val($text_copy.text()).select();
document.execCommand("copy");
$temp.remove();
$('.copy_link_mess').fadeIn(400);
setTimeout(function(){$('.copy_link_mess').fadeOut(400);},5000);
});
});
</script>

Скрипт простенький и работает следующим образом:

• В второй строке указываем класс элемента по клику на который будет выполнятся скрипт - text_copy_link. Как я и говорил класс может быть любой, главное, чтобы у элемента и в скрипте он совпадал.
• Во третей строке задаем переменную - $text_copy. Это наш блок по которому мы кликнули.
• В четвертой строке создаем переменную - $temp. Это просто поле, в котором будем хранить содержимое, то что скопировали.
• В пятой строке после тега body выводим наше поле.
• Далее в шестой строке, нашему полю ввода присваиваем содержимое и выделяем текст нашего элемента, по которому кликнули.
• В седьмой строке копируем в буфер то что выделеноdocument.execCommand("copy");
• Восьмая строка - удаление нашего поля ввода, что мы создали временно и добавили после body

В принципе, это основная часть скрипта, именно она выполняет копирование. Следующие две строки - это вывод нашего блока с сообщением об успешном копировании. Если вам не нужно это то следующие две строки не нужны, так же не нужен и сам блок сс сообщением. если же нужен, то:

• $('.copy_link_mess').fadeIn(400); - Показываем блок с классом - copy_link_mess.
• setTimeout(function(){$('.copy_link_mess').fadeOut(400);},5000); - прячем наш блок через 5 секунд. 5000 - это и есть 5 сек, просто указано в миллисекундах. Можете поменять на свое.

Далее закрываем скобки и все готово. Теперь можно проверить работу проделанной работы. Если вы все сделали правильно и не допустили ошибок то все должно работать.

На этом все, спасибо за внимание. 🙂