Статьи

JQuery Копировать в буфер обмена

Август 14, 2017

В недавнем проекте мне нужно было создать кнопку, которая скопировала бы некоторый текст в буфер обмена пользователя. Поскольку я собирался построить это на событии нажатия кнопки, я хотел сделать это с помощью Javascript или jQuery.

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

После долгих поисков я обнаружил плагин jQuery, который находится на Github и называется ZeroClipboard . Это библиотека, которая предоставляет вам способ копирования текста в буфер обмена с помощью Adobe Flash и интерфейса Javascript. Flash может получить доступ к буферу обмена вашего компьютера, потому что вы должны установить flash и согласиться с настройками безопасности, поэтому мы должны использовать flash для доступа к буферу обмена. Мы можем использовать Javascript в качестве интерфейса для прошивки, чтобы начать его с нажатия кнопки на кнопке.

Вы можете скачать ZeroClipboard со страницы его проекта на Github.

ZeroClipboard

Github фактически использует проект ZeroClipboard на своем собственном сайте, чтобы позволить вам скопировать URL-адрес хранилища.

Как использовать ZeroClipboard

Для начала вам нужно загрузить как Javascript, так и флэш-файл из репозитория ZeroClipboard. Затем вы можете добавить это на свою страницу, просто включив некоторые файлы Javascript.

<html>
  <body>
    <script src="ZeroClipboard.js"></script>
    <script src="main.js"></script>
  </body>
</html>

Затем в файле main.js необходимо создать клиент, используемый в ZeroClipboard, для копирования текста в буфер обмена.

// main.js
var client = new ZeroClipboard( document.getElementById("copy-button"), {
  moviePath: "/path/to/ZeroClipboard.swf"
} );

client.on( "load", function(client) {
  // alert( "movie is loaded" );

  client.on( "complete", function(client, args) {
    // `this` is the element that was clicked
    this.style.display = "none";
    alert("Copied text to clipboard: " + args.text );
  } );
} );

Следующие примеры покажут вам 3 различных способа установки текста для копирования: вы можете установить текст в Javascript, установить целевую область для копирования текста или установить текст с HTML -атрибутом данных .

Установить текст в коде

Чтобы установить текст в коде Javascript, вы сначала создаете кнопку, чтобы мы могли прикрепить событие щелчка.

<button id="click-to-copy">Click To Copy</button>

В Javascript мы можем настроить клиент ZeroClipboard и установить текст на событие нажатия кнопки.

Сначала нам нужно настроить клиент ZeroClipboard и прикрепить путь к фильму для SWF-файла. Нам просто нужно передать объект JQuery кнопки в конструктор объекта ZeroClipboard.

var client = new ZeroClipboard( $("#click-to-copy"), {
              moviePath: "zeroclipboard/ZeroClipboard.swf",
              debug: false
} );

Используя этот клиентский объект, мы теперь можем установить текст для события click кнопки ZeroClipboard. Мы можем использовать метод setText (), чтобы установить текст в коде Javascript.

client.on( "load", function(client)
{
    $('#flash-loaded').fadeIn();

    client.on( "complete", function(client, args) {
        client.setText( "Set text copied." );
        $('#click-to-copy-text').fadeIn();
    } );
} );

Посмотреть демо

Установить цель копирования

Цель копирования позволяет вам определить элемент HTML, который вы можете получить для копирования текста, значение, которое он будет использовать, может быть значением элемента, innerHTML или textContent. Это работает с атрибутом данных data-clipboard-target со значением идентификатора элемента, который вы хотите скопировать.

<button id="target-to-copy" data-clipboard-target="clipboard-text">Click To Copy</button>
<textarea name="clipboard-text" id="clipboard-text" cols="30" rows="10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mattis lacus nibh, ac sollicitudin sapien accumsan in. Mauris euismod posuere tellus luctus sodales.
Fusce a consectetur massa, non tincidunt mauris. Phasellus a rutrum libero. Praesent tempus urna et nisi aliquam convallis. Fusce porttitor justo condimentum orci euismod, pulvinar congue magna vestibulum.
Sed gravida eleifend justo, id ultrices tellus porttitor nec. Nam porttitor gravida tempor. In libero ante, euismod ac fermentum nec, gravida ut dolor. Nullam a pulvinar ligula.
Phasellus euismod rutrum risus non dapibus. Nullam pretium mauris vel fringilla pretium. Mauris faucibus risus vitae nulla dignissim imperdiet.
Pellentesque elementum venenatis arcu, ut bibendum risus varius nec. Fusce eu tincidunt nunc. Duis sagittis dolor congue mauris tincidunt, eu condimentum eros rhoncus.
</textarea>

Мы настраиваем клиента ZeroClipboard, который будет прикреплен к кнопке цели для копирования . ZeroClipboard будет искать атрибут data-clipboard-target и использовать это значение, чтобы получить текст для копирования.

var clientTarget = new ZeroClipboard( $("#target-to-copy"), {
    moviePath: "http://paulund.localhost/playground/demo/zeroclipboard-demo/zeroclipboard/ZeroClipboard.swf",
    debug: false
} );

clientTarget.on( "load", function(clientTarget)
{
    $('#flash-loaded').fadeIn();

    clientTarget.on( "complete", function(clientTarget, args) {
        clientTarget.setText( args.text );
        $('#target-to-copy-text').fadeIn();
    } );
} );

При этом по-прежнему используется метод setText (), но используемый набор будет представлять собой текст, отправляемый с использованием свойства args.text.

Посмотреть демо

Установить копию текста

Кнопка set copy text будет использовать другой атрибут данных, который будет определять текст для копирования.

<button id="text-to-copy" data-clipboard-text="Click To Copy!">Click To Copy</button>

Javascript, который нам нужен для этого, такой же, как целевой пример, код, который нам нужен для кодирования, помещается в свойство args.text, затем мы можем использовать его в методе setText () для копирования в буфер обмена.

var clientText = new ZeroClipboard( $("#text-to-copy"), {
    moviePath: "http://paulund.localhost/playground/demo/zeroclipboard-demo/zeroclipboard/ZeroClipboard.swf",
    debug: false
} );

clientText.on( "load", function(clientText)
{
    $('#flash-loaded').fadeIn();

    clientText.on( "complete", function(clientText, args) {
        clientText.setText( args.text );
        $('#text-to-copy-text').fadeIn();
    } );
} );

Посмотреть демо

Полная документация ZeroClipboard

Для полной документации о том, как использовать ZeroClipboard, смотрите обновленную версию на странице проекта Github.

ZeroClipboard Документация

39
Share: