1 Тема від Master_Sergius Востаннє редагувалося Master_Sergius (29.02.2016 21:48:03)

  • Дата реєстрації: 01.10.2014
  • Повідомлень: 1 068
    • Репутація: 805

Тема: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

Дуже цікава задача для джаваскриптизерів.

Отже, по-порядку:

1. Суть - потрібно скопіювати певний текст із бразура в буфер обміну по натисненні на певну кнопку.
Звісно, задача дика, оскільки браузери не призначені для такого і з метою безпеки не повинен взаємодіяти із ОС. Тому, злі люди придумали різні речі, одна із них - флешова штука ZeroClipboard. І ось тепер біда - бо замовники тепер хочуть мати в себе таку фічу!

2. Дехто пішов ще далі, до чудової бібліотеки DataTables - http://www.datatables.net/download/ додали таку підтримку того ZeroClipboard, щоб можна було копіювати в буфер вибрані рядки, стовпці і т.п. - https://cdn.datatables.net/tabletools/2.0.3/. Кнопки, створені за допомогою цієї бібліотеки і прив'язані до таблиці - працюють добре, нарікань нема.

3. Тепер же потрібно зробити окрему кнопку, яка не прив'язана до таблиці і повинна скопіювати текст із звичайного об'єкта textarea. Звісно, хотілося б скористатися уже тим, що є і не додавати у проект окремо бібліотеку ZeroClipboard.js, її флеш-файл, дописувати у залежності і т.п. Але тут і почались проблеми. Наразі, Я накидав макет того, що повинно було бути в реальності і чомусь цей макет ще гірше працює, ніж в тому реальному проекті.

3.1. html

▼Прихований текст
<html>
    <head>
        <title>Sergius' Sandbox</title>
        <script src="jquery-1.9.1.min.js"></script>
        <script src="jquery.dataTables.min.js"></script>
        <script src="TableTools.min.js"></script>
        <script src="table_zero.js"></script>
    </head>

    <body>
        <input type="button" id="show_text" value="Show Text"></input>
        <div>
        <textarea id="text_holder"></textarea>
        </div>
    </body>
</html>

3.2. table_zero.js

▼Прихований текст
function show_text(){
    $('#text_holder').toggle();
    if ($('#show_text').val() == 'Show Text'){
        $('#show_text').val('Hide Text');
        // copy to clipboard
        ZeroClipboard_TableTools.setMoviePath('copy_csv_xls.swf');
        var clip = new ZeroClipboard_TableTools.Client();
        clip.glue("show_text", "copy");
        clip.setText($("#text_holder").val());
    }
    else {
        $('#show_text').val('Show Text');
    }
}

document.ready = function(){
    $('#show_text').click(show_text);
    $('#text_holder').val('Hello world');
    $('#text_holder').hide();
}

Лише таким чином мені вдалося заставити його копіювати текст без таблиці, але тут очевидно, що подія прив'язується лише після першого натискання і копіює уже за другим разом, коли textarea зникає. Коли ж Я пробував виносити це в document.ready чи на початок обробки події - нічого не працювало. Пробував також передати об'єкт clip як аргумент функції. Ніяких результатів.
І ось що теж дивно - на цьому макеті він відмовляється працювати взагалі. Є підозри на різницю версій, хоча Firebug не показує ніяких помилок чи ще чогось.

Отже, запитання:

1) що тут не так?
2) чи можна його все ж заставити працювати, а чи доведеться таки використовувати чистий ZeroClipboard?

2 Відповідь від VTrim Востаннє редагувалося VTrim (28.02.2016 16:05:02)

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 319
    • Репутація: 2297

Re: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

Читайте про використання document.execCommand("copy");

https://developers.google.com/web/updat … y-commands

https://developer.mozilla.org/ru/docs/W … xecCommand

Подякували: Master_Sergius1

3 Відповідь від Master_Sergius

  • Дата реєстрації: 01.10.2014
  • Повідомлень: 1 068
    • Репутація: 805

Re: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

VTrim написав:

Читайте про використання document.execCommand("copy");

https://developers.google.com/web/updat … y-commands

https://developer.mozilla.org/ru/docs/W … xecCommand

Дуже цікаво. Завтра перевірю чи підтримується це тим проектом, він доволі старечий.

4 Відповідь від VTrim

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 319
    • Репутація: 2297

Re: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

Master_Sergius написав:
VTrim написав:

Читайте про використання document.execCommand("copy");

https://developers.google.com/web/updat … y-commands

https://developer.mozilla.org/ru/docs/W … xecCommand

Дуже цікаво. Завтра перевірю чи підтримується це тим проектом, він доволі старечий.

Ну з сучасних моб/пк браузерів тестував. Все працює.

5 Відповідь від 221VOLT

  • 221VOLT
  • 221VOLT
  • ♥ pattern matching
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 26.09.2015
  • Повідомлень: 2 720
    • Репутація: 1876

Re: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

https://clipboardjs.com/
? таке ще є, чи ви pure js пишете

Подякували: Master_Sergius1

221VOLT вебсайт

6 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

VTrim написав:

Читайте про використання document.execCommand("copy");

Before Firefox 41, clipboard capability needed to be enabled in the user.js preference file. See A brief guide to Mozilla preferences for more information. If the command wasn't supported or enabled, execCommand was raising an exception instead of returning false.In Firefox 41 and later, clipboard capability are enabled by default in any event handler that is able to pop-up a window (semi-trusted scripts).

А взагалі то, такий функціонал є у CSS Bootstrap 3

Подякували: Master_Sergius1

7 Відповідь від Master_Sergius

  • Дата реєстрації: 01.10.2014
  • Повідомлень: 1 068
    • Репутація: 805

Re: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

Всім дякую. Але в ідеалі мені потрібно використати те, що Я описав у початковому пості. Але коли буду гаяти час, а воно не запрацює, то прийдеться користатися чимось іншим або... або щось придумаю.

8 Відповідь від Master_Sergius

  • Дата реєстрації: 01.10.2014
  • Повідомлень: 1 068
    • Репутація: 805

Re: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

Ех, на жаль, на цьому проекті не взлітає цей document.copy, а селект працює. Доведеться таки мучитися з тим ZeroClipboard

9 Відповідь від VTrim

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 319
    • Репутація: 2297

Re: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

Готовий приклад копіювання тексту з форми. У мене працює.

<textarea id="text" placeholder="Введіть тест для копіювання"></textarea>

<p><button id="copy">Копіювати</button></p>

<script>
var copy = document.getElementById("copy");  
copy.addEventListener('click', function(event) { 
  
  var text = document.getElementById("text");  
  var range = document.createRange();  
  range.selectNode(text);  
  window.getSelection().addRange(range);  

  try {    
    var successful = document.execCommand('copy');  
    var msg = successful ? 'Скопійовано в буфер обміну' : 'Не скопійовано';  
    alert('Статус: ' + msg);  
  } catch(err) {  
    alert('Помилка');  
  }    
  window.getSelection().removeAllRanges();  
});
</script>
Подякували: 221VOLT1

10 Відповідь від Master_Sergius

  • Дата реєстрації: 01.10.2014
  • Повідомлень: 1 068
    • Репутація: 805

Re: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

Пане VTrim, Я робив це вдома і в мене все працює, але на тому проекті - ні. Навіть краще сказати, що тестив на різних віртуалках, які повинні мати доступ до веб-морди того проеку, то лише на найновішій пішло, всі решту видавали помилку. І лишається лише варіант із флешем.

11 Відповідь від VTrim

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 319
    • Репутація: 2297

Re: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

Зрозуміло.

12 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

Є ще такий варіант http://zenorocha.github.io/clipboard.js/

Подякували: Master_Sergius1

13 Відповідь від Master_Sergius

  • Дата реєстрації: 01.10.2014
  • Повідомлень: 1 068
    • Репутація: 805

Re: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

ktretyak написав:

Є ще такий варіант http://zenorocha.github.io/clipboard.js/

Класно, але HTML5...

14 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

Це ви зробили висновок із цієї цитати:

We're living a declarative renaissance, that's why we decided to take advantage of HTML5 data attributes for better usability.

По-моєму тут говориться про переваги, а не про вимоги, хоча... я сам ним не користувався, не знаю. Після вашої теми згадав що на сайті Angular це використовують, зайшов у їхній код, бачу, що вони використовують цей скрипт, на гітхабі він набрав більше десяти тисяч лайків.

15 Відповідь від Master_Sergius

  • Дата реєстрації: 01.10.2014
  • Повідомлень: 1 068
    • Репутація: 805

Re: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

ktretyak написав:

Це ви зробили висновок із цієї цитати:

We're living a declarative renaissance, that's why we decided to take advantage of HTML5 data attributes for better usability.

По-моєму тут говориться про переваги, а не про вимоги, хоча... я сам ним не користувався, не знаю. Після вашої теми згадав що на сайті Angular це використовують, зайшов у їхній код, бачу, що вони використовують цей скрипт, на гітхабі він набрав більше десяти тисяч лайків.

Ну але воно опирається якраз на те, про що писав VTrim і яке не працює всюди:
(цитата з гітхабу)
This library relies on both Selection and execCommand APIs. The second one is supported in the following browsers (далі перелік версій)

16 Відповідь від 221VOLT

  • 221VOLT
  • 221VOLT
  • ♥ pattern matching
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 26.09.2015
  • Повідомлень: 2 720
    • Репутація: 1876

Re: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

ktretyak написав:

Є ще такий варіант http://zenorocha.github.io/clipboard.js/

я те ж саме запропонував декілька повідомлень вище

чому люди(у більшості) у інтернеті такі ж неуважні як у реалі?)))

221VOLT вебсайт

17 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

221VOLT написав:

я те ж саме запропонував декілька повідомлень вище

чому люди(у більшості) у інтернеті такі ж неуважні як у реалі?)))

Усе через інформаційну перевантаженість.

18 Відповідь від Master_Sergius

  • Дата реєстрації: 01.10.2014
  • Повідомлень: 1 068
    • Репутація: 805

Re: ZeroClipboard, DataTables - копіювання тексту із браузера в буфер

Забув дописати, що у випадку із цим скриптом, там дуже простий баг - флешовий об'єкт при вішанні на об'єкт влазить всередину цього об'єкту, і, оскільки $('#show_text').val() постійно перетирається і переприсвоюється, тому виходить така кака. В реальному проекті, Я переробив по-іншому, крім того довелося помудохатися з подіями (бо в різних браузерах, ця біда ще по-різному поводилася). Коротше кажучи, Я більш-менш розібрався, але використовувати флеш в браузерах - дуже погана ідея. На жаль, то не від мене залежить :)