Разработка → Копируем в буфер обмена в FireFox 3.5 и IE8

deerua 17 июля 2009 в 19:04 27,9k
С приходом 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

Набрано на лысой клавиатуре
Проголосовать:
+26
Сохранить: