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

在...创建的问题 Sat, Aug 3, 2013 12:00 AM

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

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

他们如何实现这种魔力?

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

    
917
  1. 如果你看看实时DOM,就会有一个带有“clipboard-container”类的div。当你按住ctrl键时,它会被一个textarea填充(并在你取下ctrl键时被删除)。我认为你的顿悟是正确的。我只是不确定他们在哪里存储每张卡的URL
    2013-07-08 13:42:13Z
  2. @ Ian,是的,我可以确认,这正是它的工作原理。谢谢你挖掘它! (我不打扰存储URL的位置。我对剪贴板 - 无闪存技术感兴趣。)
    2013-07-08 14:01:23Z
  3. 我查了一下Daniel的个人资料,看来,他是Trello的开发者。 (我想知道,他从哪里获得了Coffeescript来源。)所以他有一个不公正的优势;-)无论如何,谢谢!
    2013-07-08 14:05:42Z
  4. 我不打算减损这种技术的机智,它非常聪明;但我不禁想到,这充其量只是很难公开/记录,最糟糕的是,这是一个非常不稳定的用户体验。当然,它没有侵略性的刺激(因为我不记得我不小心复制了卡片URL的时间),但作为一个长期的Trello用户,我完全不知道这存在。
    2013-07-12 18:35:51Z
  5. @ MichaelWales此功能已于5天前添加;我们还在测试它,如果它似乎正在工作,它将被记录为键盘快捷键。
    2013-07-12 19:37:39Z
  6. 醇>
    5答案                              5 跨度>                         

    披露: 我编写了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 键时,剪贴板助手知道要选择什么。

        
    1532
    2014-07-11 13:54:55Z
    1. 太棒了!但是你如何拥有Mac OS - 你在那里“监听”Command键吗?
      2013-07-08 17:25:10Z
    2. NVM我现在在你的CoffeeScript代码中看到了e.metaKey ...
      2013-07-08 17:25:36Z
    3. 值得注意的是,类似的方法也可以用于捕获粘贴的内容
      2013-07-09 03:01:38Z
    4. 对于键盘用户来说这听起来很糟糕 - 无论何时尝试复制(或者按住ctrl +点击在另一个窗口中打开,或者按Ctrl + F进行搜索,等等),你的焦点被移到了无关的地方。
      2013-07-14 08:45:29Z
    5. 随意使用 js2coffee.org 翻译原来如果这样倾向于js。
      2013-08-03 17:37:03Z
    6. 醇>

    我实际上构建了 Chrome扩展程序 ,以及所有网页。源代码是在GitHub上

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

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

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

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

      我通过暂时清除零长度选择,保存插入位置,复制和恢复插入位置来解决#2。

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

          
    79
    2013-08-10 07:40:39Z
    1. 所以你实际上和Trello一样。当这样的事情收敛时很甜蜜
      2013-08-03 23:13:45Z
    2. @ ThomasAhle,你是什么意思?
      2014-05-22 22:08:32Z
    3. @ Pacerier,我认为Thomas提到趋同进化 - “......不同血统物种中相似特征的独立进化”
      2014-11-02 01:28:29Z
    4. 圣牛你可以打开一个关于这个话题的新聊天
      2017-11-20 13:50:03Z
    5. 醇>

    在雨衣的帮助下(链接到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/

        
    20
    2016-10-05 08:21:59Z
    1. 在Chrome v33中不起作用。
      2014-02-27 00:53:57Z
    2. @ MaksimVi。它可以在我的Mac上使用Chrome v33.0.1750.146
      2014-03-05 08:01:03Z
    3. @ don41382它无法在Safari上正常工作(至少是Mac版本)。在适当的情况下,我的意思是它会复制,但你必须按两次cmd + C.
      2014-04-16 08:44:56Z
    4. @ don41382我不确切知道为什么,但我找到了解决方案。你有一个小错误,onKeyDown第一个语句应该是if(!(e.ctrlKey || e.metaKey)){return;这意味着我们需要准备textarea来复制metaKey(这是来自trello的人们如何制作一个技巧)。这是来自trello.com的代码 gist.github.com/fustic/10870311
      2014-04-17 19:22:31Z
    5. 它在FF 33.1中无效,因为el.innerText未定义,因此我将clipboard()函数的最后一行更改为clip.setValue(el.innerText || el.textContent);以获得更多跨浏览器兼容性。链接: jsfiddle.net/AGEf7/31
      2014-11-14 15:06:21Z
    6. 醇>

    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;
    
    })());
    
        
    7
    2015-09-27 12:36:18Z
    1. 我很确定_.defer()是指 Underscrore.JS
      2015-04-22 07:15:35Z
    2. 醇>

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

    有一个readonly输入元素,以编程方式聚焦,工具提示“按CTRL-C复制”。当您点击该快捷方式时,输入内容将有效地进入剪贴板。真的很好:))

        
    5
    2013-08-10 07:42:47Z
来源放置 这里