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

Тема: 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 (28.02.2016 16:05:02)

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

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

VTrim написав:

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

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

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

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

4

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

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

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

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

6

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

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

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

8

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

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

9

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

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

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

11

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

Зрозуміло.

12

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

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

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

13

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

ktretyak написав:

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

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

14

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

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

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

ktretyak написав:

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

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

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

17

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

221VOLT написав:

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

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

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

18

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

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