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

Question

当您将鼠标悬停在 Trello 中的卡片上时并按Ctrl+C，将这张卡片的URL复制到剪贴板。他们是怎么做到的？

据我所知，没有涉及 Flash 电影。我有 Flashblock已安装，并且 Firefox 网络选项卡显示未加载任何 Flash 电影。 (这是常用的方法，例如 ZeroClipboard。)

他们是如何实现这种魔力的？

(此时我想我顿悟了:你不能在页面上选择文本，所以我假设他们有一个不可见的元素，他们通过 JavaScript 代码创建一个文本选择，并且 Ctrl+C 触发浏览器的默认行为，复制该不可见节点的文本值。)

Answer 1

披露: I wrote the code that Trello uses ;下面的代码是 Trello 用来完成剪贴板技巧的实际源代码。

---

我们实际上并没有“访问用户的剪贴板”，而是通过在用户按下 Ctrl+C 时选择有用的东西来帮助用户。。 p>

听起来你已经明白了；我们利用了这样一个事实，即当您想按 Ctrl+C 时，您必须先按 Ctrl 键。当按下 Ctrl 键时，我们会弹出一个文本区域，其中包含我们想要在剪贴板上结束的文本，并选择其中的所有文本，因此当 C 键被击中。 (然后当 Ctrl 键出现时我们隐藏文本区域。)

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

在我们得到的 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 使您在弹出时实际上看不到 textarea ... 但它“可见”足以复制。

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

TrelloClipboard.set(cardUrl)

... 这样剪贴板助手就知道在按下 Ctrl 键时要选择什么。