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

Question

当您将鼠标悬停在Trello中的卡片上并按Ctrl+时C，该卡片的URL被复制到剪贴板。他们如何做到这一点？

据我所知，没有涉及Flash电影。我已经安装了Flashblock，并且Firefox的“网络”标签显示未加载Flash电影。（这是通常的方法，例如，ZeroClipboard。）

他们如何实现这种魔力？

（目前，我想我顿悟了：您无法选择页面上的文本，因此我假设它们具有不可见的元素，它们通过JavaScript代码创建文本选择，并Ctrl+ C触发浏览器的默认行为，复制该不可见的元素节点的文本值。）

Answer 1

我们实际上并没有“访问用户的剪贴板”，而是通过在用户按Ctrl+ 时选择一些有用的东西来帮助用户C。听起来您已经解决了；我们利用了这样一个事实，当您想按Ctrl+时C，您必须先Ctrl按键。当Ctrl按下键时，我们会弹出一个文本区域，其中包含我们要在剪贴板上结束的文本，并选择其中的所有文本，因此当C按下键时，所有选择都已设置。（然后，当Ctrl按键出现时，我们将隐藏文本区域）具体来说，Trello这样做：TrelloClipboard = new class&nbsp; constructor: ->&nbsp; &nbsp; @value = ""&nbsp; &nbsp; $(document).keydown (e) =>&nbsp; &nbsp; &nbsp; # Only do this if there's something to be put on the clipboard, and it&nbsp; &nbsp; &nbsp; # looks like they're starting a copy shortcut&nbsp; &nbsp; &nbsp; if !@value || !(e.ctrlKey || e.metaKey)&nbsp; &nbsp; &nbsp; &nbsp; return&nbsp; &nbsp; &nbsp; if $(e.target).is("input:visible,textarea:visible")&nbsp; &nbsp; &nbsp; &nbsp; return&nbsp; &nbsp; &nbsp; # Abort if it looks like they've selected some text (maybe they're trying&nbsp; &nbsp; &nbsp; # to copy out a bit of the description or something)&nbsp; &nbsp; &nbsp; if window.getSelection?()?.toString()&nbsp; &nbsp; &nbsp; &nbsp; return&nbsp; &nbsp; &nbsp; if document.selection?.createRange().text&nbsp; &nbsp; &nbsp; &nbsp; return&nbsp; &nbsp; &nbsp; _.defer =>&nbsp; &nbsp; &nbsp; &nbsp; $clipboardContainer = $("#clipboard-container")&nbsp; &nbsp; &nbsp; &nbsp; $clipboardContainer.empty().show()&nbsp; &nbsp; &nbsp; &nbsp; $("<textarea id='clipboard'></textarea>")&nbsp; &nbsp; &nbsp; &nbsp; .val(@value)&nbsp; &nbsp; &nbsp; &nbsp; .appendTo($clipboardContainer)&nbsp; &nbsp; &nbsp; &nbsp; .focus()&nbsp; &nbsp; &nbsp; &nbsp; .select()&nbsp; &nbsp; $(document).keyup (e) ->&nbsp; &nbsp; &nbsp; if $(e.target).is("#clipboard")&nbsp; &nbsp; &nbsp; &nbsp; $("#clipboard-container").empty().hide()&nbsp; set: (@value) ->在DOM中，<div id="clipboard-container"><textarea id="clipboard"></textarea></div>剪贴板内容的CSS：#clipboard-container {&nbsp; position: fixed;&nbsp; left: 0px;&nbsp; top: 0px;&nbsp; width: 0px;&nbsp; height: 0px;&nbsp; z-index: 100;&nbsp; display: none;&nbsp; opacity: 0;}#clipboard {&nbsp; width: 1px;&nbsp; height: 1px;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; padding: 0px;}...，而CSS做到了这一点，因此当它弹出时，您实际上看不到textarea，但是它的“可见”程度足以复制。当您将鼠标悬停在卡片上时，它会呼叫TrelloClipboard.set(cardUrl)...因此剪贴板助手会在Ctrl按下键时知道选择什么。