使用zeroclipboard单击按钮时如何将div文本发送到剪贴板?

时间:2015-05-06 00:16:10

标签: javascript zeroclipboard

我试图使用zeroclipboard将3个div的文本复制到剪贴板

我想要的是在点击复制按钮时将Tittle, Version, and Descript的内容发送到剪贴板,以便用户可以使用它。它基本上是书籍参考。

我的div上的文字是无法选择的,因为它有滑动操作,可以将标题版本和描述的值更改为我数据库中的下一个可用数据。

这就是为什么我需要将div的当前数据发送到剪贴板的复制按钮。

到目前为止,这就是我所拥有的。我几乎没有尝试发送描述的文本,但没有任何反应。

我的ZeroClipboard似乎已正确加载,因为控制台正在显示加载的电影。但是当我点击按钮时,没有任何反应。

我将非常感谢任何人的帮助。

由于

这是我的代码

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.js"></script>

<div id="container">
    <div id="content">
        <div id="MyContent">
            <div id="title">The Book Title</div>
            <div id="version">The Book Version</div>
            <div id="descript">This is the short description of the book</div>
            <button class="descript" accesskey="C">Copy</button>
        </div>
    </div>
</div>

<script type="text/javascript">
  var client = new ZeroClipboard( $('#descript') );

  client.on( 'ready', function(event) {
    console.log( 'movie is loaded' );

    client.on( 'copy', function(event) {
      event.clipboardData.setData('text/plain', event.target.innerHTML);
    } );

    client.on( 'aftercopy', function(event) {
      console.log('Copied text to clipboard: ' + event.data['text/plain']);
    } );
  } );

  client.on( 'error', function(event) {
    console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
    ZeroClipboard.destroy();
  } );
</script>

0 个答案:

没有答案