Jquery / Javascript копия в буфер обмена - PullRequest
Новая
       40

Jquery / Javascript копия в буфер обмена

3 голосов
/ 31 марта 2011

Я использую http://www.steamdev.com/zclip/#usage для копирования текста в буфер обмена, и этот код работает просто отлично. Он использует flash для создания кроссбраузерного решения и основан на ZeroClipboard , который на данный момент считается лучшим рабочим решением на данный момент.

Однако я бы хотел иметь несколько копий для кнопок буфера обмена или ссылок на моей странице. Вот пример.

http://jsfiddle.net/stofke/TB23d/

Этот код работает, он копирует текст кода купона в буфер обмена и открывает новую страницу с правильной ссылкой. Как я могу использовать этот код в других ссылках, не дублируя его для каждой ссылки / идентификатора.

Используя только класс 

$(function() {
$('.copy').zclip({
    path: 'http://shopsheep.com/js/ZeroClipboard.swf',
    copy: $(this).text(),
    afterCopy: function() {
        window.open($(this).attr('href'));
    }
});
* * 1016});

не работает: как вы можете видеть здесь: http://jsfiddle.net/stofke/EAZYW/ если вы удалите функцию afterCopy, вы увидите, что $ (this) .text () вернет всю страницу, а не только текст между тегом ссылки.

делает что-то вроде этого 

$(function() {
$('a.copy', this).zclip({
    path: 'http://shopsheep.com/js/ZeroClipboard.swf',
    copy: $('a.copy', this).text(),

});
* +1025 *});

немного улучшается, но возвращает весь текст между тегом ссылки, как вы можете видеть здесь. http://jsfiddle.net/stofke/hAh3j/

Ответы [ 4 ]

4 голосов
/ 31 марта 2011

Это похоже на работу - кто-то может сделать его более элегантным

http://jsfiddle.net/5nLw6/7/

$(function() {
    $('.copy').each(function() {
        var linkId = $(this).attr("id");
        $(this).zclip({
        path: 'http://shopsheep.com/js/ZeroClipboard.swf',
        copy: $("#"+linkId).text(),
        afterCopy: function() {
            window.open($('#'+linkId).attr('href'));
        }
    });
  });
});
2 голосов
/ 31 марта 2011

Я действительно обнаружил, что использовать ZeroClipboard напрямую так же просто, я просто добавил этот код на случай, если кто-то захочет найти решение без использования zclip. 

ZeroClipboard.setMoviePath('http://shopsheep.com/js/ZeroClipboard.swf');
$(document).ready(function() {
    $(".copy").each(function(i) {
        var clip = new ZeroClipboard.Client();
        var myTextToCopy = $(this).text();
        var myTextUrl = $(this).attr('href');
        clip.setText(myTextToCopy);
        clip.addEventListener('complete', function(client, text) {
            window.open(myTextUrl);
        });
        clip.glue($(this).attr("id"));
    });
});

http://jsfiddle.net/stofke/JxMbd/

0 голосов
/ 10 февраля 2017

Облегченное решение jQuery ... повторно использовать класс для копирования текста из любого элемента. 

$(document).on('click', '.copytoclipboard', function(e) {
  if($("#holdtext").length < 1)
    $("body").append('<textarea id="holdtext" style="height:0;width:0;border:0;outline:0;resize:none;"></textarea>');
  $("#holdtext").val($(this).text()).select();
  document.execCommand("Copy");
});
0 голосов
/ 14 октября 2016

Это то, что мы следуем в Oodles Technologies.

Чтобы использовать нулевое копирование в буфер обмена, вам нужно два файла 1.ZeroClipboard.js
2 .ZeroClipboard.swf оба файла можно загрузить здесь 

<html>
<head>
    <script src =”../ZeroClipboard.js”></script>
    <script >
     // configure ZeroClipboard first
     ZeroClipboard.config( { moviePath : /path/swffile/ZeroClipboard.swf } );

     // initialize constructor
    var client = new ZeroClipboard($(“#elementid”));

    /* elementid is the element on which click , the data will copy  to clipboard. you can also pass multiple elements, it use jquery selector */
        </script>
<body>
<input type=”text”  id =”targetid”></button>
<button  id =”elementid” data-clipboard-text ='data for copy’ >copy</button>
</body>
</head>
<html>

ZeroClipboard автоматически копирует значение атрибута data-clipboard-text, когда событие происходит при передаче элемента в конструктор ZeroClipboard

...