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)