Divulgation: j'ai écrit le code que Trello utilise ; le code ci-dessous est le code source réel que Trello utilise pour accomplir l'astuce du presse-papiers.
Nous n'accédons pas réellement au presse-papiers de l'utilisateur, mais nous aidons un peu l'utilisateur en sélectionnant quelque chose d'utile lorsqu'il appuie sur Ctrl+ C.
On dirait que vous l'avez compris; nous profitons du fait que lorsque vous voulez appuyer sur Ctrl+ C, vous devez d'abord appuyer sur la Ctrltouche. Lorsque la Ctrltouche est enfoncée, nous insérons une zone de texte qui contient le texte que nous voulons finir dans le presse-papiers, et sélectionnons tout le texte qu'il contient, de sorte que la sélection est entièrement définie lorsque la Ctouche est enfoncée. (Ensuite, nous masquons la zone de texte lorsque la Ctrlclé est levée)
Plus précisément, Trello fait ceci:
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) ->
Dans le DOM, nous avons
<div id="clipboard-container"><textarea id="clipboard"></textarea></div>
CSS pour le presse-papiers:
#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;
}
... et le CSS fait en sorte que vous ne pouvez pas réellement voir la zone de texte quand elle apparaît ... mais elle est suffisamment "visible" pour copier.
Lorsque vous survolez une carte, elle appelle
TrelloClipboard.set(cardUrl)
... alors l'assistant presse-papiers sait quoi sélectionner lorsque la Ctrltouche est enfoncée.