当您将鼠标悬停在Trello中的卡片上并按Ctrl+时C,该卡片的URL被复制到剪贴板。他们如何做到这一点?
Ctrl
C
据我所知,没有涉及Flash电影。我已经安装了Flashblock,并且Firefox的“网络”标签显示未加载Flash电影。(这是通常的方法,例如,ZeroClipboard。)
他们如何实现这种魔力?
(目前,我想我顿悟了:您无法选择页面上的文本,因此我假设它们具有不可见的元素,它们通过JavaScript代码创建文本选择,并Ctrl+ C触发浏览器的默认行为,复制该不可见的元素节点的文本值。)
披露: 我写了Trello使用的代码;下面的代码是Trello用于完成剪贴板技巧的实际源代码。
我们实际上并没有“访问用户的剪贴板”,而是通过在用户按Ctrl+ 时选择一些有用的东西来帮助用户C。
听起来您已经解决了;我们利用了这样一个事实,当您想按Ctrl+时C,您必须先Ctrl按键。当Ctrl按下键时,我们会弹出一个文本区域,其中包含我们要在剪贴板上结束的文本,并选择其中的所有文本,因此当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做到了这一点,因此当它弹出时,您实际上看不到textarea,但是它的“可见”程度足以复制。
当您将鼠标悬停在卡片上时,它会呼叫
TrelloClipboard.set(cardUrl)
…因此剪贴板助手会在Ctrl按下键时知道选择什么。