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

jQuery zClip – копируем текст в буфер обмена

Для решения нашей задачи: скопировать текст в буфер обмена, я остановился на jQuery плагине – zClip.
Основная причина выбора – маленький размер и достаточный функционал.

Подключаем jQuery zClip к себе в проект

1. Для начала необходимо скачать сам файл плагина:
zClip-download
Жмем на кнопку указанную на картинке, чтобы скачать минимизированную версию плагина.
 

 
2. Для работы плагина нам нужен файл ZeroClipboard.swf, т.к. плагин работает с использованием Flash. Скачать этот файл на странице плагина у меня не получилось, но на гит-хабе он есть:
ZeroClipboard-download
 

 
3. После того как все скачано, добавляем файлы к себе в проект

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Вот такая структура получилась у меня:
zClip-add-to-project
 

Используем jQuery zClip для копирования текста в буфер обмена

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

jQuery(selector).zclip({options});

 
Табличку с основными настройками плагина я скопировал с хит-хаба, не переводил, там все довольно понятно:

Option Default value Description
path 'ZeroClipboard.swf' The path to ZeroClipboard.swf
copy null String to copy or function that returns a string to copy
afterCopy null Function to execute after copying
beforeCopy null Function to execute before copying
clickAfter true Relay a click event to the element bound to after copying
setHandCursor true Set the cursor to pointer
setCSSEffects true Add hover and active classes to the element bound to

 

ВАЖНО!!! У плагина два обязательных свойства: path и copy

zClip-usage
 

Работа с плагином jQuery zClip для копирования текста в буфер обмена

Для тестирования работы плагина я сделал три примера:
Первый – Использование плагина только с двумя обязательными опциями

    $(".default").zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('.default').text()
    });

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

Второй – Использование плагина с пустыми функциями обратного отклика

    $(".no-feedback").zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('.no-feedback').text(),
        beforeCopy:function(){},
        afterCopy:function(){}
    });

Текст копируется и нет никакого уведомления об этом!
 

Третий – Использование плагина с функциями обратного отклика

    $(".feedback").zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('.feedback').text(),
        beforeCopy:function(){
            $(this).css('background','yellow');
            $(this).css('color','orange');
        },
        afterCopy:function(){
            alert("Текст скопирован в буфер обмена!");
            alert("И мы изменим цвет фона и текста :)");
            $(this).css('background','green');
            $(this).css('color','white');
        }
    });

В этом примере мы настроили свои уведомления и сделали некоторые изменения стиля для скопированного текста.
 

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

(6 голосов. Рейтинг: 5,00 из 5)
Загрузка...

11 thoughts on “jQuery копируем текст в буфер обмена

  1. Спасибо за обзор!
    Скажите плз, есть ли у него возможность вставлять из буфера. Хотелось бы по событию .click вставлять в текстовое поле содержимое буфера. Может другие какие плагины есть с данной функцией?

  2. Все разобрался, его надо на сервере запускать, если не сложно допишите в описании плагина ))
    Спасибо за детальную разборку плагина

    1. Рад что все получилось, да Денвер, XAMPP или реальный сервер все же необходим 🙂

  3. Запускаю на Open Server? но почему то копирование происходит только со второго клика по заданному элементу. В чем может быть причина?
    Код:

    jQuery(‘.element span’).click(function(){
    var text = jQuery(this).html();
    jQuery(this).zclip({
    path:’images/cropimages/js/ZeroClipboard.swf’,
    copy:text,
    });

    1. Разобрался, это из-за того что код я добавил в событие click.
      Так надо:
      jQuery(‘.element span’).zclip({
      path:’images/cropimages/js/ZeroClipboard.swf’,
      copy:jQuery(this).html(),
      });

      Теперь такой вопрос, как получить в данном случае элемент по которому сделан клик, “this” здесь не работает..?

      1. Решил задачу, так в моем случае работает this:

        jQuery(‘.element span’).zclip({
        path:’js/ZeroClipboard.swf’,
        copy:function(){ return jQuery(this).html(); },
        });

  4. Супер, получилось, но как сохранять c html тегами, при копировании теги сбрасываются

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

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