Trello如何访问用户的剪贴板？ [英] How does Trello access the user's clipboard?

问题描述

当您将鼠标悬停在 Trello 中的卡片上，然后按 Ctrl + C ，此卡的网址会复制到剪贴板。他们是如何做到的？

据我所知，没有涉及到Flash电影。我安装了 Flashblock ，Firefox网络选项卡未显示加载的Flash影片。 （这是通常的方法，例如，由ZeroClipboard。）

他们是如何实现这个魔术？

（正确的在这一刻我认为我有一个顿悟：你不能选择页面上的文本，所以我假设他们有一个不可见的元素，他们通过JavaScript代码创建一个文本选择， Ctrl + < kbd> C 会触发浏览器的默认行为，复制该不可见节点的文本值。）

解决方案

： 我写了Trello使用的代码;下面的代码是Trello用来完成剪贴板技巧的实际源代码。

---

用户剪贴板，而是通过在按 Ctrl + C 时选择有用的东西来帮助用户。

<听起来像你已经想出来了;我们利用这样一个事实，当你想打开 Ctrl + C 时，必须首先打开 Ctrl 键。当按下 Ctrl 键时，我们在包含我们要在剪贴板上结束的文本的textarea中弹出，并选择其中的所有文本，所以当 C 键。 （然后当 Ctrl 键出现时，我们隐藏textarea）

具体来说，Trello执行此操作：

  TrelloClipboard = new class 
 constructor： - > 
 @value =
 
 $（document）.keydown（e）=> 
＃只有这样做，如果有东西要放在剪贴板上，它
＃看起来像他们开始一个复制的快捷方式
 if！@value || ！（e.ctrlKey || e.metaKey）
 return 
 
如果$（e.target）.is（input：visible，textarea：visible）
 return 
 
＃如果它看起来像是选择了一些文本（也许他们正在尝试
＃复制出一些描述或东西），中止
如果window.getSelection？ （）？toString（）
 return 
 
 if document.selection？.createRange（）。text 
 return 
 
 _.defer => 
 $ clipboardContainer = $（＃clipboard-container）
 $ clipboardContainer.empty（）。show（）
 $（< textarea id ='clipboard'> textarea>）
 .val（@value）
 .appendTo（$ clipboardContainer）
 .focus（）
 .select（）
 
 $文档）.keyup（e） - > 
如果$（e.target）.is（＃clipboard）
 $（＃clipboard-container）empty（）。hide（）
 
 set： （@value） - > 
  

在DOM中我们有

 < div id =clipboard-container>< textarea id =clipboard>< / textarea>< / div& 
  

剪贴板内容的CSS：

 ＃clipboard-container {
 position：fixed; 
 left：0px; 
 top：0px; 
 width：0px; 
 height：0px; 
 z-index：100; 
 display：none; 
 opacity：0; 
} 
 #clipboard {
 width：1px; 
 height：1px; 
 padding：0px; 
} 
  

...而且CSS使它不能看到

当您将光标悬停在卡片上时，会调用

  TrelloClipboard.set（cardUrl）
  

...因此剪贴板助手知道在按下 Ctrl 键时要选择的内容。

When you hover over a card in Trello and press Ctrl+C, the URL of this card is copied to the clipboard. How do they do this?

As far as I can tell, there is no Flash movie involved. I've got Flashblock installed, and the Firefox network tab shows no Flash movie loaded. (That's the usual method, for example, by ZeroClipboard.)

How do they achieve this magic?

(Right at this moment I think I had an epiphany: You cannot select text on the page, so I assume they have an invisible element, where they create a text selection via JavaScript code, and Ctrl+C triggers the browser's default behaviour, copying that invisible node's text value.)

解决方案

Disclosure: I wrote the code that Trello uses; the code below is the actual source code Trello uses to accomplish the clipboard trick.

---

We don't actually "access the user's clipboard", instead we help the user out a bit by selecting something useful when they press Ctrl+C.

Sounds like you've figured it out; we take advantage of the fact that when you want to hit Ctrl+C, you have to hit the Ctrl key first. When the Ctrl key is pressed, we pop in a textarea that contains the text we want to end up on the clipboard, and select all the text in it, so the selection is all set when the C key is hit. (Then we hide the textarea when the Ctrl key comes up)

Specifically, Trello does this:

TrelloClipboard = new class
  constructor: ->
    @value = ""

    $(document).keydown (e) =>
      # Only do this if there's something to be put on the clipboard, and it
      # looks like they're starting a copy shortcut
      if !@value || !(e.ctrlKey || e.metaKey)
        return

      if $(e.target).is("input:visible,textarea:visible")
        return

      # Abort if it looks like they've selected some text (maybe they're trying
      # to copy out a bit of the description or something)
      if window.getSelection?()?.toString()
        return

      if document.selection?.createRange().text
        return

      _.defer =>
        $clipboardContainer = $("#clipboard-container")
        $clipboardContainer.empty().show()
        $("<textarea id='clipboard'></textarea>")
        .val(@value)
        .appendTo($clipboardContainer)
        .focus()
        .select()

    $(document).keyup (e) ->
      if $(e.target).is("#clipboard")
        $("#clipboard-container").empty().hide()

  set: (@value) ->

In the DOM we've got

<div id="clipboard-container"><textarea id="clipboard"></textarea></div>

CSS for the clipboard stuff:

#clipboard-container {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
  z-index: 100;
  display: none;
  opacity: 0;
}
#clipboard {
  width: 1px;
  height: 1px;       
  padding: 0px;
}

... and the CSS makes it so you can't actually see the textarea when it pops in ... but it's "visible" enough to copy from.

When you hover over a card, it calls

TrelloClipboard.set(cardUrl)

... so then the clipboard helper knows what to select when the Ctrl key is pressed.

这篇关于Trello如何访问用户的剪贴板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！