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

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

client.on（“copy”，function（event）{...}

是使用

<强> event.relatedTarget

这是jquery如何读取要读取的目标ID。

这是一个小例子：

HTML SECTION

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

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起作用

使用data-clipboard-target

2 个答案:

示例代码