Допилить ZeroClipboard

Тема в разделе "JavaScript", создана пользователем Sunday, 14 авг 2015.

Модераторы: ZiX
  1. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    726
    Симпатии:
    315
    Использую ZeroClipboard (демка) для копирования в буфер обмена нужного текста.
    Код у нас такой:

    HTML:
    
    <script>
    $(document).ready(function(){
        var client1 = new ZeroClipboard($("#copy"), {
          moviePath: "ZeroClipboard.swf"
        });
      
        client1.on("load", function(client1) {
          client1.on("complete", function(client1, args) {
            $('#copy').hide();
          });
        });
    });
    </script>
    
    <a id="copy" href="#" data-clipboard-text="load <?=$line?>">Копировать команду</a>
    
    
    При клике текст копируется из атрибута data-clipboard-text.

    Но таких элементов на странице несколько десятков, а флешка создается только для 1-го.
    Как изменить код, чтобы флешки создались для всех элементов?

    И еще вот здесь (поиском по странице найти Копирование в буфер), Чикуёнок пишет, что много даже маленьких флешек на странице сильно грузят проц и показывает там решение, как скопировать данные без использования флеша, но я не понимаю что там делать нужно.

    Помогите, люди добрые [​IMG]
     
  2. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    352
    Симпатии:
    223
    После <body>:
    Код:
    <script src="/assets/js/ZeroClipboard.js">
            </script>
    И перед </body>:
    Код:
    <script type="text/javascript">
    $(document).ready(function(){
    var client1 = new ZeroClipboard($(".copy-button"), {
          moviePath: "/assets/ZeroClipboard.swf"
    });
    client1.on("load", function(client1) {
          client1.on("complete", function(client1, args) {
                  alert('Текст скопирован');
          });
    });
    });
            </script>
    Пример:
    Код:
    <td  title="Скопировать в буфер обмена" data-clipboard-text="R207906776928" class="copy-button"><b>R207906776928</b></td>
     
    Последнее редактирование модератором: 14 авг 2015
    Sunday нравится это.
  3. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    726
    Симпатии:
    315
    Так, спасибо, работает! Алерт не раоботает, почему?
    Мне нужен hide, а не алерт, но сути это не меняет. Всё равно не работает.

    И повторому моменту, кто всё таки подскажет, что сделать нужно? Вот, что он там пишет:

    HTML:
    <div id="copy-clip" contenteditable="true"></div>
    <script type="text/javascript">
    function doCopy() {
    var obj = document.getElementById('copy-clip');
    obj.innerHTML = 'my new data';
    obj.focus();
    document.execCommand('copy')
    }
    </script>
     
    Последнее редактирование: 14 авг 2015
  4. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    352
    Симпатии:
    223
    Где-то читал что это браузеры запрещают уже, так как всякие умники умудрились туда рекламу впихивать без ведома пользователя.

    А alert у меня работает, может версия ZeroClipboard не та?
     
  5. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    726
    Симпатии:
    315
    ZC - 2.2.0
    jQuery - 2.1.3

    На каких версиях у тебя работает?
     
  6. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    352
    Симпатии:
    223
    jQuery v1.11.1
    ZC v2.0.0-alpha.1
     
  7. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    726
    Симпатии:
    315
    Не работает нихрена. Что за хрень, не пойму :mad: Копируется нормально, но hide не срабатывает!
    Куда пойти, куда податься? :confused:
     
    Последнее редактирование: 15 авг 2015
  8. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    352
    Симпатии:
    223
    http://web.eebuy.ru/ - нажимаешь что нибудь купить, там есть примечание и кошелек для платежа. Они копируются, у меня всё работает, alert срабатывает
     
  9. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    340
    Симпатии:
    162
    document.execCommand('copy') - не кроссбраузерное решение. См.: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
    Вероятно, что лучше определять у юзера браузер и в зависимости от этого использовать или флэш или document.execCommand('copy').

    В указании contenteditable="true" вроде бы необходимости нет. Пример ниже у меня работал в Opera 31.0, IE9, Chrome 44. В Мозилле разумеется не заработал. В сафари и на мобильных не тестил.
    Код:
    <div class="cl88">Click сюда</div>
    
      <script>
        $(document).ready(function(){
    $('.cl88').on('click', function(){
    var e=this;
    if(window.getSelection){
    var s=window.getSelection();
    if(s.setBaseAndExtent){
    s.setBaseAndExtent(e,0,e,e.innerText.length-1);
    }else{
    var r=document.createRange();
    r.selectNodeContents(e);
    s.removeAllRanges();
    s.addRange(r);}
    }else if(document.getSelection){
    var s=document.getSelection();
    var r=document.createRange();
    r.selectNodeContents(e);
    s.removeAllRanges();
    s.addRange(r);
    }else if(document.selection){
    var r=document.body.createTextRange();
    r.moveToElementText(e);
    r.select();}
      document.execCommand('copy');
    });
    });
      </script>
    Реализация выделения отсюда.