Скопировать в буфер обмена с помощью Clipboard.js

Скопировать в буфер обмена с помощью Clipboard.js

От автора: часто приходится копировать какой-либо текст, кусочек кода или адрес со страниц сайта. Чтобы скопировать текст, его сначала необходимо выделить и затем открыть контекстное меню браузера или воспользоваться сочетанием клавиш. Однако, если на вашем сайте часто приходится копировать контент, и вы беспокоитесь об удобстве пользователей, можно упростить этот процесс с помощью clipboard.js. На сайте GitHub, к примеру, есть кнопка скопировать URL репозитория.

На сайте Bit.ly есть похожая кнопка для копирования коротких URL’ов. Есть контент, который просто необходимо скопировать. Вот в таких случаях очень удобна эта кнопка.

Раньше добавить такую кнопку было очень трудно, все из-за запрета в браузерах. Большинству разработчиков приходилось пользоваться Flash библиотеками типа Clippy. К нашему счастью, теперь у нас есть JS библиотека, облегчающая эту задачу. И это Clipboard.js. В этом уроке для новичков я расскажу, как эффективно использовать данный инструмент.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Установка

Чтобы установить Clipboard.js, необходимо загрузить файл в подходящую папку на сайте и дать на нее ссылку в документе. Или можно дать ссылку на CDN, добавьте ссылку ниже в HTML код страницы:

Нам необходимо создать два элемента. Один, целевой, для хранения копируемого контента. Целевым элементом может быть, к примеру, input (с ID), содержащий короткий URL:

Второй элемент это триггер. В нашем случае – кнопка. В триггере указывается data атрибут data-clipboard-target. В качестве значения задается ID целевого элемента:

После добавления этих двух элементов в разметку страницы можно включать Clipboard.js. Для этого необходимо добавить код ниже между тегов script или подключить код отдельным файлом.

Готово! По клику на кнопку мы теперь можем копировать короткий URL.

Расширяем возможности

В некоторых ситуациях просто нельзя добавить к целевому элементу ID, класс или data-* атрибут – при работе со старым контентом или с несколькими целевыми элементами может что-нибудь произойти.

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

Взглянем на API

В Clipboard.js есть два события: success и error. События проверяют, удачно или неудачно был скопирован контент. В Safari, скорее всего, будет постоянно срабатывать событие error, так как браузер не поддерживает команды копировать/вырезать из метода execCommand, на который полагается Clipboard.js. События возвращают следующие свойства:

action: возвращается действие, которое мы выполнили по отношению к целевому элементу. Т.е. copy или cut

text: возвращается только по событию success. В свойстве хранится текст, скопированный или вырезанный из целевого элемента.

trigger: возвращает триггер, который копирует или вырезает текст.

С помощью API можно встроить Clipboard.js в наш сайт без изменения разметки, не надо изменять элементы-обертки. В нашем случае, мы можем воспользоваться им для добавления кнопки «скопировать» для кода.

Clipboard.js + PrismJS

На этом этапе у нас уже должен быть установлен PrismJS (загрузите файл в папку на сайте и дайте ссылку на него). Каждый кусок кода в нашей разметке помещен в теги pre и code с классом language-{name}. В нашем примере мы используем код LESS, т.е. необходимо добавить класс language-less:

Добавляем кнопку Скопировать

Теперь, для того, чтобы скопировать соответствующий кусок кода, необходимо добавить в каждый тег pre кнопку. Для начала, найдем все теги pre с помощью метода getElementsByTagName.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

У нас два или больше тегов pre. Необходимо пройтись по каждому элементу в цикле.

Для добавления кнопки, добавьте код ниже в цикл for.

Пройдемся по коду. Первым делом мы проверяем, есть ли у нас тег code с классом language-. Если нет, мы не добавляем кнопку. Мы добавили кнопку к каждому тегу pre. У каждой кнопки есть класс copy-button, а на кнопке написано «Копировать»:

Теперь, данная кнопка должна отображаться в каждом куске кода:

Запускаем Clipboard

Запускаем библиотеку Clipboard. Каждая кнопка копирует код. В качестве целевого элемента задается элемент перед триггером .copy-button. В нашем случае этот элемент code.

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

Работаем с кастомными событиями

Скажем, мы хотим добавить немного интерактивности в процесс копирования контента. При успешном копировании текста, мы хотим изменить текст кнопки с «Копировать» на «Скопировано». Чтобы это сделать, добавьте код ниже:

Код выше выполняет 3 действия:

Сперва, мы очищаем выборку с помощью функции Clipboard clearSelection(). Необязательно.

Затем меняем значение на «Скопировано»

Через 2 секунды возвращаем значение «Копировать».

Для события error в браузерах, где не поддерживается метод execCommand, таких как Safari (на момент написания статьи), мы изменим текст на «Нажмите ‘CTRL+C’». Добавьте код ниже:

Вот и все! Теперь у нас полностью рабочая и интерактивная кнопка копирования текста. Нам осталось только стилизовать ее. С этой задачей справитесь сами.

Заключение

Библиотека Clipboard.js – очень полезный инструмент, позволяющий почти бескровно добавить на веб-страницу кнопку «Копировать». В этом уроке мы рассмотрели основы и немного улучшили нашу кнопку при помощи API и кастомных событий.

В Clipboard.js используется методы Selection и execCommand, т.е. наш способ будет работать только в браузерах, поддерживающих эти два метода: Chrome 42, Firefox 41, Internet Explorer 9 и Opera 9. Как говорилось выше, пользователям Safari пока что не везет. Надеюсь, вам понравился урок и не забудьте про демо.

Автор: Thoriq Firdaus

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. Александр

    Здравствуйте!
    А есть возможность сделать без поля (формы) в котором копируемый текст и без кнопки, просто текст «скопировать»?

  2. Александр

    C кнопкой разобрался, сделал <a …..
    А вот как и чем заменить input, чтобы был просто копируемый текст, так пока не понял.

  3. Igor

    Отлично, то что надо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree