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

本文介绍了Trello如何访问用户的剪贴板？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 当您将鼠标悬停在 Trello 中的卡片上，然后按 + ，此卡的网址会复制到剪贴板。他们是如何做到的？ 据我所知，没有涉及到Flash电影。我安装了 Flashblock ，Firefox网络选项卡未显示加载的Flash影片。 （这是通常的方法，例如，由ZeroClipboard。） 他们是如何实现这个魔术？ （正确的在这一刻我认为我有一个顿悟：你不能选择页面上的文本，所以我假设他们有一个不可见的元素，他们通过JavaScript代码创建一个文本选择， + C 会触发浏览器的默认行为，复制该不可见节点的文本值。）解决方案 ： 我写了Trello使用的代码;下面的代码是Trello用来完成剪贴板技巧的实际源代码。 用户剪贴板，而是通过在按 + 时选择有用的东西来帮助用户。 具体来说，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） ...因此剪贴板助手知道在按下键时要选择的内容。 When you hover over a card in Trello and press +, 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 + 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 +.Sounds like you've figured it out; we take advantage of the fact that when you want to hit +, you have to hit the key first. When the 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 key is hit. (Then we hide the textarea when the 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 callsTrelloClipboard.set(cardUrl)... so then the clipboard helper knows what to select when the key is pressed. 这篇关于Trello如何访问用户的剪贴板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！