使用数据剪贴板目标答案

【问题标题】：Using data-clipboard-target使用数据剪贴板目标
【发布时间】：2023-03-25 20:17:01
【问题描述】：

我一直在尝试从以下地址实现代码第二项 https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/instructions.md#text-to-copy

下面的例子看起来很不错。但是，我花了 8 个小时，但我无法成功。 http://zeroclipboard.org/#demo

实际上我需要对两个不同的元素使用 ZeroClipboard。如果我只使用一个元素，我可以完成。否则每次第二个构造元素的复制操作都有效。

<body>

      <div class="form-group">
         <label for="client_id" class="control-label">Client ID:</label>
         <button id="copy_id" data-clipboard-target="client_id">Copy ID</button>
         <input id="client_id" class="form-control" >
     </div>        
      <div class="form-group">
         <label for="client_id" class="control-label">Client ID:</label>
         <button id="copy_secret" data-clipboard-target="client_secret">Copy Secret</button>
         <input id="client_secret" class="form-control" >
     </div>     

     <script type="text/javascript" src="/js/ZeroClipboard.js"></script>

     <script>
                // I think I should write some codes here but which codes?
     </script>

</body>

【问题讨论】：

标签： zeroclipboard

【解决方案1】：

几个小时后，我找到了方法。如果用户想要使用两个不同的 HTML 元素，我认为这是一种方法。

示例代码

<!DOCTYPE html>
<html lang="tr">
<body>
  <div>
    <button id="copy_id" type="button" class="clip_button" type="button">
        copy id value
    </button>                           
    <input id="client_id" type="text" readonly>
  </div>

  <div>
    <button id="copy_secret" type="button" class="clip_button">
      copy secret value
    </button>
    <input id="client_secret" type="text" readonly>
  </div>

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

  <script>
    $(function() { // jquery main function

       // fill inputs using fictive data
       $("#client_id").val("ClientID112")
       $("#client_secret").val("ClientSecretWordSShh")

       // ***** copy to clipboard operations **********************
       var client = new ZeroClipboard( $('.clip_button'), {
           moviePath: "//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.swf"
       } )

       client.on("copy", function(e) {
       var clipboard = e.clipboardData;
       if(e.target.id == "copy_id")
           clipboard.setData("text/plain", $("#client_id").val())
       else
           clipboard.setData("text/plain", $("#client_secret").val())
       })
       // ***** end of copy to clipboard operations ****************

    }) // end of jquery
  </script>
</body>
</html>

【讨论】：

这真的很有帮助。谢谢

【解决方案2】：

为了使用data-clipboard-target属性，事件中唯一要做的事情

client.on("复制", function(event) { ... }

是使用

event.relatedTarget

这就是在 jquery 中读取目标 id 的方式。

举个小例子：

HTML 部分

<button class="clip_button" id="my-button_text" data-clipboard-target="clipboard_text">Copy to Clipboard</button>
<button class="clip_button" id="my-button_textarea" data-clipboard-target="clipboard_textarea">Copy to Clipboard</button>


<input type="text" id="clipboard_text" value="Clipboard Text"/>
<textarea id="clipboard_textarea">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>

JAVASCRIPT 部分

var client = new ZeroClipboard($('.clip_button'));

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

    client.on( 'copy', function(event) {
        event.clipboardData.setData('text/plain', event.relatedTarget.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();
  } );

希望对你有帮助

ZeroClipboard 2.2.0 对我有用

【讨论】：