Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.02.2016, 12:53
Аспирант
Отправить личное сообщение для Master_Sergius Посмотреть профиль Найти все сообщения от Master_Sergius
 
Регистрация: 29.07.2014
Сообщений: 42

ZeroClipboard, DataTables, копирование текста в буфер
Очень интересная задачка для джаваскриптизёров

Итак, по-порядку:

1) суть - нужно скопировать текст из браузера в буфер обмена по нажатию на кнопку;
естественно, задача в некотором смысле дикая, так как браузеры не должны были взаимодействовать с ОС, но... так случилось, и теперь заказчики очень хотят иметь в себя такую фичу;

2) некоторые люди к прелестной библиотеке DataTables - http://www.datatables.net/download/ добавили поддержку ZeroClipboard, дабы можно было копировать в буфер выбранные строки, столбцы и т.п. - https://cdn.datatables.net/tabletools/2.0.3/. Кнопки, привязанные к таблице, работают на ура.

3) Но вот теперь надо сделать отдельную кнопку, которая не привязана к таблице и должна скопировать текст из обычного textarea. Хотелось бы воспользоваться уже тем, что имеется (TableTools с той последней ссылки) и не добавлять в проект отдельно библиотеку ZeroClipboard.js, её флеш-файл, дописывать в зависимости и т.п. Но, вот здесь и начались проблемы.

Вот макет того, что должно быть в реальности, но этот макет почему-то ещё хуже чем аналогичный код в реальном проекте.

3.1) table_zero.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?
3) пробовал вариант из https://developers.google.com/web/up...-copy-commands, но он не у всех поддерживается, а флеш работает почти везде, даже на очень старых виртуалках из старыми браузерами и т.п. Поэтому, вряд ли имеется ещё какой-то путь...

Последний раз редактировалось Master_Sergius, 01.03.2016 в 11:30.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Копирование текста в буфер обмена в браузере через JavaScript xintrea Элементы интерфейса 8 18.06.2015 16:43
Копирование текста. Добавить текст к копируемому Vampir3 Общие вопросы Javascript 2 05.10.2013 14:40
ZeroClipboard копирование в буфер обмена bully Библиотеки/Тулкиты/Фреймворки 0 29.09.2013 18:04
копирование в буфер cyber Events/DOM/Window 7 16.04.2012 00:58
Копирование в буфер другой странички pitbullko Элементы интерфейса 29 23.10.2009 17:37