Как на самом деле использовать ZeroClipboard в JQuery? - PullRequest
Новая
       19

Как на самом деле использовать ZeroClipboard в JQuery?

12 голосов
/ 10 мая 2010

Я просто не могу получить эту вещь. Как ZeroClipboard должен работать? Зачем нужно перемещать flash-элемент по скопированному тексту?

Я читал эту вещь: http://code.google.com/p/zeroclipboard/wiki/Instructions

Может ли кто-нибудь предоставить мне короткий фрагмент, который позволяет копировать текст в переменной в буфер обмена пользователя, когда пользователь нажимает на ссылку. Это вообще возможно? Мне все равно, если он не работает во всех браузерах (например, IE6).

Я использую jQuery.

Ответы [ 4 ]

8 голосов
/ 10 мая 2010

Код "минимального примера", указанный на странице, на которую вы ссылаетесь (http://code.google.com/p/zeroclipboard/wiki/Instructions#Minimal_Example)), выглядит как раз то, что вам нужно. Я скопировал его здесь и изменил, чтобы продемонстрировать помещение текста в переменную и затем копирование этого текст в буфер обмена, так как это то, что вас интересует. Обратите внимание, что в реальной жизни вы, вероятно, захотите сделать, это вызвать часть clip.setText() в некоторой функции, поскольку вы можете не знать, в тот момент, когда страница сначала загружена, какой текст вы хотите скопировать. 

<html>
<body>
        <script type="text/javascript" src="ZeroClipboard.js"></script>

        <div id="d_clip_button" style="border:1px solid black; padding:20px;">Copy To Clipboard</div>

        <script language="JavaScript">
                var clip = new ZeroClipboard.Client();
                var myTextToCopy = "Hi, this is the text to copy!";
                clip.setText( myTextToCopy );
                clip.glue( 'd_clip_button' );
        </script>
</body>
</html>

Элемент flash не обязательно должен быть «поверх скопированного текста»; его нужно «приклеить» к любому элементу DOM, которым вы хотите, чтобы ваш пользователь манипулировал, - скорее всего, к нажатию кнопки. Причина в том, что у Javascript нет доступа к буферу обмена, поэтому вам нужно использовать Flash. Но Flash может работать только на компьютере пользователя в ответ на щелчок пользователя, поэтому вы «обманываете» пользователя, нажимая на Flash, делая его невидимым наложением на элемент HTML.

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

3 голосов
/ 16 декабря 2010

Немного более сложный пример jquery. Скопируйте текст, когда 

  <script language="JavaScript">
            ZeroClipboard.setMoviePath('zeroclipboard/ZeroClipboard.swf');
        $(document).ready(function(){
              $(".clickme").each(function (i) {
                    var clip = new ZeroClipboard.Client();

                    var myTextToCopy = $(this).val();
                    clip.setText( myTextToCopy );
                        clip.addEventListener('complete', function (client, text) {
                 alert("Copied text to clipboard." );
                });
                    clip.glue( $(this).attr("id") );



              });


        });

    </script>



<?php
//these text boxes were in a loop
for($i=0;$i<10;$i++)
    echo "<input type=\"text\" id=\"x$i\" class=\"clickme\" value=\"$value"\" />";

?>
1 голос
/ 08 сентября 2011

Текущая версия ZeroClipboard на самом деле содержит ошибку , которая может вызвать ошибку JS при использовании сценария, предложенного JacobM, - в следующем сценарии:

  1. Создать ссылку на ZeroClipboard.Client (), возвращенную из нового конструктора. (например, var clip = new ZeroClipboard.Client ();)
  2. Установить текст, выполнив clip.setText ("string");
  3. Изменить DOM (скрыть флэш-фильм или элемент-предок)
  4. Установите текст снова, выполнив clip.setText («некоторая другая строка»)

Чтобы не вызывать ошибок, вместо этого следует использовать слушатель события наведения мыши для установки текста: 

<html>
<body>
    <script type="text/javascript" src="ZeroClipboard.js"></script>

    <div id="d_clip_button">Copy To Clipboard</div>

    <script language="JavaScript">
        var clip = new ZeroClipboard.Client(),
            myTextToCopy = "Hi, this is the text to copy!";                    
        clip.glue('d_clip_button');
        clip.addEventListener('onMouseOver', clipboardEvent);
        function clipboardEvent() {
            clip.setText( myTextToCopy );
        }
    </script>
</body>
</html>
1 голос
/ 27 ноября 2010

Этот код работает в моей настройке только вместе с Chrome, когда у меня есть тег в области тела вроде 

<script type="text/javascript" src="js-file-doesnt-exists-404.js"></script>
<div>
......
some stuff here
......
....
</div>
...some more stuff....
<the button>
....

при удалении файла включения кнопка не работает .... действительно странно

...