javascript - Trello如何访问用户的剪贴板？(How does Trello access the user's clipboard?)

Question

When you hover over a card in Trello and press Ctrl + C , the URL of this card is copied to the clipboard.

(当您将鼠标悬停在Trello中的卡上并按Ctrl + C时 ，此卡的URL将复制到剪贴板。)

How do they do this?

(他们如何做到这一点？)

As far as I can tell, there is no Flash movie involved.

(据我所知，没有涉及Flash电影。)

I've got Flashblock installed, and the Firefox network tab shows no Flash movie loaded.

(我安装了Flashblock ，Firefox网络选项卡显示没有加载Flash电影。)

(That's the usual method, for example, by ZeroClipboard.)

(（这是通常的方法，例如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 Ctrl + C triggers the browser's default behaviour, copying that invisible node's text value.)

(（此刻我觉得我有一个顿悟：你不能在页面上选择文字，所以我假设他们有一个不可见的元素，他们通过JavaScript代码创建文本选择， Ctrl + C触发浏览器的默认行为，复制那个不可见节点的文本值。）)

  ask by Boldewyn translate from so

Answer 1

Disclosure: I wrote the code that Trello uses ;

(披露： 我写了Trello使用的代码 ;)

the code below is the actual source code Trello uses to accomplish the clipboard trick.

(下面的代码是Trello用来完成剪贴板技巧的实际源代码。)

---

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 .

(我们实际上并没有“访问用户的剪贴板”，而是通过在按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.

(我们利用了这样一个事实：当你想要按Ctrl + C时 ，你必须先按Ctrl键。)

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.

(当按下Ctrl键时，我们弹出一个textarea，其中包含我们想要在剪贴板上结束的文本，并选择其中的所有文本，因此当C键被命中时，所有选择都会被设置。)

(Then we hide the textarea when the Ctrl key comes up)

(（然后我们在Ctrl键出现时隐藏textarea）)

Specifically, Trello does this:

(具体来说，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) ->

In the DOM we've got

(在DOM中我们得到了)

<div id="clipboard-container"><textarea id="clipboard"></textarea></div>

CSS for the clipboard stuff:

(剪贴板内容的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;
}

... 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.

(...并且CSS使它在弹出时无法真正看到textarea ...但是它“可见”足以复制。)

When you hover over a card, it calls

(当您将鼠标悬停在卡片上时，它会调用)

TrelloClipboard.set(cardUrl)

... so then the clipboard helper knows what to select when the Ctrl key is pressed.

(...然后剪贴板帮助器知道按下Ctrl键时要选择的内容。)