Как стать автором
Обновить

Копируем в буфер обмена в FireFox 3.5 и IE8

JavaScript
С приходом 10го флеша, ФФ3.5 и ИЕ8, на многих сайтах перестала работать волшебная кнопка «Скопировать в буфер». Перестала работать из соображений безопасности (что бы когда заходишь на какой либо сайт, у тебя в буфере не появилась левая ссылка, или рекламный текст, или злоумышленники не применили это фичу в других целях).

Сейчас ЕкшонСкрипт даёт скопировать в буфер обмена только при действии пользователя, то есть при клике по ролику (а ролик то можно сделать прозрачным ;). Этим и воспользовался jhuckaby при создании своего скрипта Zero Clipboard.

Посмотреть демо:


Скрипт работает во всех современных браузерах.
Проверено в ФФ3.5, ИЕ8, ИЕ8(мод7), Хром3, Опера10б2, Сафари4. Поддержка флеш 9 и 10.

Суть:


После того, как мы с помощью JS, инициализируем скрипт, укажем путь к ZeroClipboard.swf и создадим клиент для копирования, мы можем смело заносить в буфер по клику, любую информацию.

Но скрипт этим не ограничен, у него есть чудесные свойства (методы):
  • приклеивание к DOM элементу (Gluing) — то бишь, мы указав айди элемента, приклеиваем поверх него флешку (она копирует в буфер), которая автоматически подстроится под размер элемента;
  • ксс эффекты — скрипт подсвечивает элемент, на который подвешена кнопка, создавая сабклассы «hover», «active» (аля псевдо). Их можно изменить на своё усмотрение в CSS;
  • возможность задать собственное представление — это на случай, если нужно создать кастомный прямоугольник, и не нужно никуда клеить флешку;
  • и ещё он может рулить стандартными событиями (onLoad, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onComplete).

О этом и многом другом, чудесно викирасписано

Пример


<html>
<body>
<!-- Инициализируем, с учётом что ZeroClipboard.swf радом с *.js -->
<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();
// Указываем что копируем
clip.setText( 'Copy me!' );
// Клеим к кнопке
clip.glue( 'd_clip_button' );
</script>
</body>
</html>


* This source code was highlighted with Source Code Highlighter.


Полный пример


<html>
<head>
<style type="text/css">
#d_clip_button {
text-align:center;
border:1px solid black;
background-color:#ccc;
margin:10px; padding:10px;
}
/* Указываем свои стили для пседо-саб-классов */
#d_clip_button.hover { background-color:#eee; }
#d_clip_button.active { background-color:#aaa; }
</style>
</head>
<body>
<script type="text/javascript" src="ZeroClipboard.js"></script>

Copy to Clipboard: <input type="text" id="clip_text" size="40" value="Copy me!"/><br/><br/>

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

<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setMoviePath( 'ZeroClipboard.swf' ); // укажем путь к флешке
clip.setText( '' ); // onМouseDown будет копировать нужный текст
clip.setHandCursor( true ); // делаем курсор в виде руки
clip.setCSSEffects( true ); // разрешаем CSS эффекты

clip.addEventListener( 'load', function(client) {
// alert( "Загрузилась флешка " );
});

clip.addEventListener( 'complete', function(client, text) {
alert("Скопирован текст: " + text );
});

clip.addEventListener( 'mouseOver', function(client) {
// alert("Навели мышку на флешку");
});

clip.addEventListener( 'mouseOut', function(client) {
// alert("Убрали мышку с флешки");
});

clip.addEventListener( 'mouseDown', function(client) {
// alert("Нажали мышкой по флешке");
// Копируем нужный текст, в данном случае значение инпута 'clip_text'
clip.setText( document.getElementById('clip_text').value );
});

clip.addEventListener( 'mouseUp', function(client) {
// alert("Отжали мышку");
});
// Приклеили к кнопке с айди 'd_clip_button'
clip.glue( 'd_clip_button' );
</script>
</body>
</html>


* This source code was highlighted with Source Code Highlighter.


Ещё раз ссылки:



Детально рассмотрено юзером dohtar

Набрано на лысой клавиатуре
Теги:clipboardfirefox 3.5ie 8zeroclipboardбуфер обмена
Хабы: JavaScript
Всего голосов 34: ↑30 и ↓4 +26
Просмотры32.1K

Похожие публикации

Fullstack разработчик Drupal 8
от 80 000 до 150 000 ₽Caterme.ruМожно удаленно
JavaScript Developer
от 2 700 €DiscoМожно удаленно
JavaScript-разработчик
до 180 000 ₽MobilityРязань
JavaScript разработчик
от 180 000 ₽SportrecsМоскваМожно удаленно
Javascript разработчик
от 160 000 до 220 000 ₽ArtezioМосква

Лучшие публикации за сутки