协慌网

当您将鼠标悬停在Trello 中的卡上并按Ctrl + C 时 ，此卡的 URL 将复制到剪贴板。他们如何做到这一点？

据我所知，没有涉及 Flash 电影。我安装了Flashblock ，Firefox 网络选项卡显示没有加载 Flash 电影。 （这是通常的方法，例如 ZeroClipboard。）

他们如何实现这种魔力？

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

披露： 我写了 Trello 使用的代码 ; 下面的代码是 Trello 用来完成剪贴板技巧的实际源代码。

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

听起来你已经弄清楚了; 我们利用了这样一个事实：当你想要按 Ctrl + C 时 ，你必须先按Ctrl键。当按下Ctrl键时，我们弹出一个 textarea，其中包含我们想要在剪贴板上结束的文本，并选择其中的所有文本，因此当C键被命中时，所有选择都会被设置。 （然后我们在Ctrl键出现时隐藏 textarea）

具体来说，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键时要选择的内容。

我实际上构建了一个 Chrome 扩展程序 ，可以完成此操作，适用于所有网页。源代码在 GitHub 上 。

我发现 Trello 的方法存在三个漏洞，我知道这是因为我自己也遇到过它们:)

该副本在以下情况下不起作用：

1. 如果您已按下Ctrl键然后将鼠标悬停在链接上并点击C ，则该副本不起作用。
2. 如果光标位于页面中的其他文本字段中，则副本不起作用。
3. 如果光标位于地址栏中，则副本不起作用。

我通过总是有一个隐藏的跨度来解决＃1，而不是在用户点击Ctrl / Cmd时创建一个。

我通过暂时清除零长度选择，保存插入位置，执行复制和恢复插入位置来解决＃2 问题。

我还没有找到＃3 的修复程序:)（有关信息，请查看我的 GitHub 项目中的未解决问题）。

在雨衣（ 链接到 GitHub ）代码的帮助下，我设法得到一个正在运行的版本，使用纯 JavaScript 访问剪贴板。

function TrelloClipboard() {
    var me = this;

    var utils = {
        nodeName: function (node, name) {
            return !!(node.nodeName.toLowerCase() === name)
        }
    }
    var textareaId = 'simulate-trello-clipboard',
        containerId = textareaId + '-container',
        container, textarea

    var createTextarea = function () {
        container = document.querySelector('#' + containerId)
        if (!container) {
            container = document.createElement('div')
            container.id = containerId
            container.setAttribute('style', [, 'position: fixed;', 'left: 0px;', 'top: 0px;', 'width: 0px;', 'height: 0px;', 'z-index: 100;', 'opacity: 0;'].join(''))
            document.body.appendChild(container)
        }
        container.style.display = 'block'
        textarea = document.createElement('textarea')
        textarea.setAttribute('style', [, 'width: 1px;', 'height: 1px;', 'padding: 0px;'].join(''))
        textarea.id = textareaId
        container.innerHTML = ''
        container.appendChild(textarea)

        textarea.appendChild(document.createTextNode(me.value))
        textarea.focus()
        textarea.select()
    }

    var keyDownMonitor = function (e) {
        var code = e.keyCode || e.which;
        if (!(e.ctrlKey || e.metaKey)) {
            return
        }
        var target = e.target
        if (utils.nodeName(target, 'textarea') || utils.nodeName(target, 'input')) {
            return
        }
        if (window.getSelection && window.getSelection() && window.getSelection().toString()) {
            return
        }
        if (document.selection && document.selection.createRange().text) {
            return
        }
        setTimeout(createTextarea, 0)
    }

    var keyUpMonitor = function (e) {
        var code = e.keyCode || e.which;
        if (e.target.id !== textareaId || code !== 67) {
            return
        }
        container.style.display = 'none'
    }

    document.addEventListener('keydown', keyDownMonitor)
    document.addEventListener('keyup', keyUpMonitor)
}

TrelloClipboard.prototype.setValue = function (value) {
    this.value = value;
}

var clip = new TrelloClipboard();
clip.setValue("test");

唯一的问题是，此版本仅适用于 Chrome。 Trello 平台支持所有浏览器。我错过了什么？

谢谢 VadimIvanov。

查看一个工作示例： http ： //jsfiddle.net/AGEf7/