使用数据剪贴板目标

Question

我一直在尝试从以下地址实施代码第二项 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>

Answer 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>

Answer 2

for use data-clipboard-target attribute，事件中唯一要做的事情

client.on("copy", 函数(事件) { ... }

是使用

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

使用数据剪贴板目标

Using data-clipboard-target

zeroclipboard

示例代码