Divulgação: escrevi o código que o Trello usa ; o código abaixo é o código-fonte real que o Trello usa para realizar o truque da área de transferência.
Na verdade, não "acessamos a área de transferência do usuário", em vez disso, ajudamos um pouco o usuário selecionando algo útil quando pressionamos Ctrl+ C.
Parece que você já descobriu; aproveitamos o fato de que, quando você deseja pressionar Ctrl+ C, deve pressionar a Ctrltecla primeiro. Quando a Ctrltecla é pressionada, exibimos uma área de texto que contém o texto que queremos terminar na área de transferência e selecionamos todo o texto nela, para que a seleção esteja definida quando a Ctecla for pressionada. (Então, ocultamos a área de texto quando a Ctrlchave é exibida)
Especificamente, o Trello faz isso:
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) ->
No DOM, temos
<div id="clipboard-container"><textarea id="clipboard"></textarea></div>
CSS para o material da área de transferência:
#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;
}
... e o CSS faz com que você não consiga ver a área de texto quando ela aparece ... mas é "visível" o suficiente para copiar.
Quando você passa o mouse sobre um cartão, ele chama
TrelloClipboard.set(cardUrl)
... para que o auxiliar da área de transferência saiba o que selecionar quando a Ctrltecla for pressionada.