Trello如何访问用户的剪贴板？

Trello如何访问用户的剪贴板？

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

---

我们实际上并没有“访问用户的剪贴板”，而是通过在用户按

Ctrl

+ 时选择一些有用的东西来帮助用户

C

。

听起来您已经解决了；我们利用了这样一个事实，当您想按

Ctrl

+时

C

，您必须先

Ctrl

按键。当

Ctrl

按下键时，我们会d出一个文本区域，其中包含我们要在剪贴板上结束的文本，并选择其中的所有文本，因此当

C

按下键时，所有选择都已设置。（然后，当

Ctrl

按键出现时，我们将隐藏文本区域）

具体来说，Trello这样做：

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

在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做到了这一点，因此当它d出时，您实际上看不到textarea，但是它的“可见”程度足以复制。

当您将鼠标悬停在卡片上时，它会呼叫

TrelloClipboard.set(cardUrl)

…因此剪贴板助手会在

Ctrl

按下键时知道选择什么。