Trello如何访问用户的剪贴板?


936

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

据我所知,没有涉及Flash电影。我已经安装了Flashblock,并且Firefox的“网络”标签显示未加载Flash电影。(这是通常的方法,例如ZeroClipboard。)

他们如何实现这种魔力?

(目前,我想我顿悟了:您无法在页面上选择文本,因此我假设它们具有不可见的元素,它们通过JavaScript代码创建文本选择,并Ctrl+ C触发浏览器的默认行为,将其复制为节点的文本值。)


22
如果您查看实时DOM,则存在一个带有“剪贴板容器”类的div。按住ctrl键时,它会填充一个文本区域(当您抬起ctrl键时会被删除)。我认为你的顿悟是正确的。我不确定他们将每张卡的网址存储在哪里
Ian

@Ian,是的,我可以确认,这就是它的工作原理。感谢您对其进行挖掘!(我不关心URL的存储位置。我对不带剪贴板的剪贴板技术很感兴趣。)
Boldewyn

2
我查阅了Daniel的个人资料,看来他是Trello开发人员。(我想知道他是从哪儿获得Coffeescript的。)所以他有不公正的优势;-)还是谢谢!
Boldewyn

1
我不想降低这种技术的机敏性,它非常聪明。但我忍不住认为,充其量这是充裕的宣传/记录,最糟糕的是,这会给用户带来极大的伤害。诚然,这不是侵入性的破坏(因为我不记得我不小心复制卡URL的时间),但是作为Trello的长期用户,我绝对不知道这存在。
迈克尔·威尔士,

3
@MichaelWales该功能于5天前添加;我们仍在对其进行测试,如果它似乎可以正常工作,则将其记录为键盘快捷键。
Daniel LeCheminant 2013年

Answers:


1546

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


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

听起来您已经解决了;我们利用了这样一个事实,当您想按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按下键时知道选择什么。


3
太棒了!但是,您如何拥有Mac OS?您是否在那里“收听” Command键?
苏曼

28
值得注意的是,类似的方法也可以很好地捕获粘贴的内容
Michael Robinson

17
听起来这对键盘用户来说是不好的-每当您尝试复制(或按住Ctrl并单击以在另一个窗口中打开,或按Ctrl + F进行搜索,依此类推)时,您的焦点就会移到无关的地方。
亚当A

2
+1。这个答案中有很多整洁的东西。我喜欢您实际上共享了源代码。但是我认为很聪明的是对提供ctrl + c功能的过程的实际解释。在我看来,利用ctrl和c不能完全同时按下的事实,是通过在按下ctrl时开始准备c来利用的,这是非常明智的。我真的很喜欢这种方法。
Travis J

8
如果愿意,可以随意使用js2coffee.org将原始文件翻译成js。
亚历山大·库里林

79

实际上,我为所有网页构建了一个完全可以做到这一点的Chrome扩展程序。源代码在GitHub上

我发现Trello的方法存在3个错误,因为我自己面对过它们,所以我知道这些错误:)

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

  1. 如果您已经Ctrl按下然后将链接悬停并单击C,则该副本无效。
  2. 如果光标位于页面的其他文本字段中,则该副本无效。
  3. 如果光标位于地址栏中,则该副本无效。

我一直通过隐藏跨度来解决#1,而不是在用户点击Ctrl/ 时创建一个跨度Cmd

我通过暂时清除零长度选择,保存插入符号位置,进行复制并还原插入符号位置来解决#2问题。

我尚未找到针对#3的修复程序:)(有关信息,请检查我的GitHub项目中的未解决问题)。


10
因此,您实际上执行了与Trello相同的方法。当这样的事情汇合时,
真是太好了

@ThomasAhle,你是什么意思?
Pacerier

7
@Pacerier,我认为Thomas暗示了趋同进化 -“ ...不同血统物种中相似特征的独立进化”
yoniLavi 2014年

圣牛,您可以打开一个新话题有关此话题
carkod

20

借助raincoat的代码(链接到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/


@ don41382,它在Safari(至少是Mac版本)上无法正常工作。在适当的情况下,我的意思是确实可以复制,但是您必须按两次cmd + C。
Vadim Ivanov

@VadimIvanov真的!有人知道为什么吗?
Felix

1
@ don41382我不知道为什么,但是我找到了解决方案。您有一个小错误,onKeyDown的第一条语句应该是if(!(e.ctrlKey || e.metaKey)){return; }这意味着我们需要准备文本区域,以便在按下metaKey时进行复制(这是trello的家伙的绝招)。这是trello.com gist.github.com/fustic/10870311
Vadim Ivanov

@VadimIvanov谢谢。我会在上面修复它。
菲利克斯

1
由于el.innerText未定义,它在FF 33.1中不起作用,因此我将clipboard()函数的最后一行更改为,以clip.setValue(el.innerText || el.textContent);增强跨浏览器的兼容性。链接:jsfiddle.net/AGEf7/31
RevanProdigalKnight,2014年

7

Daniel LeCheminant的代码将我从CoffeeScript转换为JavaScript(js2coffee)后对我不起作用。它不断轰炸_.defer()

我以为这与jQuery延迟有关,因此我将其更改为$.Deferred()现在可以正常工作。我在带有jQuery 2.1.1的Internet Explorer 11,Firefox 35和Chrome 39中进行了测试。用法与Daniel的帖子中描述的用法相同。

var TrelloClipboard;

TrelloClipboard = new ((function () {
    function _Class() {
        this.value = "";
        $(document).keydown((function (_this) {
            return function (e) {
                var _ref, _ref1;
                if (!_this.value || !(e.ctrlKey || e.metaKey)) {
                    return;
                }
                if ($(e.target).is("input:visible,textarea:visible")) {
                    return;
                }
                if (typeof window.getSelection === "function" ? (_ref = window.getSelection()) != null ? _ref.toString() : void 0 : void 0) {
                    return;
                }
                if ((_ref1 = document.selection) != null ? _ref1.createRange().text : void 0) {
                    return;
                }
                return $.Deferred(function () {
                    var $clipboardContainer;
                    $clipboardContainer = $("#clipboard-container");
                    $clipboardContainer.empty().show();
                    return $("<textarea id='clipboard'></textarea>").val(_this.value).appendTo($clipboardContainer).focus().select();
                });
            };
        })(this));

        $(document).keyup(function (e) {
            if ($(e.target).is("#clipboard")) {
                return $("#clipboard-container").empty().hide();
            }
        });
    }

    _Class.prototype.set = function (value) {
        this.value = value;
    };

    return _Class;

})());

5

当您缩短网址时,可以在http://goo.gl上看到非常相似的内容。

有一个只读输入元素,可以通过编程来集中注意力,CTRL-C只需按一下工具提示即可进行复制。

按下该快捷方式后,输入内容将有效进入剪贴板。非常好 :)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.