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

Posted

技术标签:

【中文标题】Trello 如何访问用户的剪贴板?【英文标题】:How does Trello access the user's clipboard? 【发布时间】:2013-07-05 20:35:45 【问题描述】:

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

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

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

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

【问题讨论】:

如果你查看实时 DOM,有一个类为“clipboard-container”的 div。当您按住 ctrl 键时,它会被一个文本区域填充(当您松开 ctrl 键时它会被删除)。我会假设你的顿悟是正确的。我只是不确定他们将每张卡的 URL 存储在哪里 @Ian,是的,我可以确认,这正是它的工作原理。感谢您挖掘它! (我不关心 URL 的存储位置。我对不带闪存的剪贴板技术很感兴趣。) 我查看了 Daniel 的个人资料,似乎他是一名 Trello 开发人员。 (我想知道,他从哪里得到 Coffeescript 的源代码。)所以他有一个不公平的优势 ;-) 无论如何谢谢! 我无意贬低这项技术的机智,它非常聪明;但我不禁认为,这充其量是宣传/记录不佳,最糟糕的是,这是一种非常不和谐的用户体验。诚然,这并不令人讨厌(因为我不记得有一次我不小心复制了卡片 URL),但作为一个长期使用 Trello 的用户,我完全不知道这存在。 @MichaelWales 此功能是 5 天前添加的;我们仍在对其进行测试,如果它似乎可以正常工作,它将被记录为键盘快捷键。 【参考方案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 键时要选择什么。

【讨论】:

太棒了!但是您如何拥有 Mac OS - 您是否“听”了那里的 Command 键? 值得注意的是,类似的方法同样适用于捕获粘贴的内容 这听起来对键盘用户不利 - 每当您尝试复制(或 ctrl+单击在另一个窗口中打开,或 Ctrl+F 搜索等)时,您的焦点被移到不相关的地方。 +1。这个答案中有很多整洁的东西。我喜欢你实际上分享了源代码。但我认为聪明的是对用于提供 ctrl+c 功能的过程的实际解释。在我看来,通过在按下 ctrl 时开始准备 c 来利用 ctrl 和 c 不能同时按下的事实是非常聪明的。我真的很喜欢这种方法。 如果愿意,可以使用js2coffee.org将原文翻译成js。【参考方案2】:

我实际上构建了a Chrome extension,它正是这样做的,并且适用于所有网页。源代码是on GitHub。

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

副本在这些情况下不起作用:

    如果您已经按下 Ctrl,然后将鼠标悬停在链接上并点击 C,则复制不起作用。 如果您的光标位于页面中的其他文本字段中,则复制不起作用。 如果您的光标在地址栏中,则复制不起作用。

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

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

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

【讨论】:

所以你实际上是用和 Trello 一样的方法做的。当这些事情融合在一起时很甜蜜 @ThomasAhle,你是什么意思? @Pacerier,我认为 Thomas 暗示了 Convergent Evolution - “......不同谱系物种中相似特征的独立进化” 天哪,你可以打开一个关于这个话题的新聊天【参考方案3】:

在raincoat's code on 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");

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

【讨论】:

@don41382 它不能在 Safari(至少 Mac 版本)上正常工作。在适当的情况下,我的意思是它确实会复制,但是您必须按两次 cmd+C。 @VadimIvanov 真的!有人知道为什么吗? @don41382 我不知道具体原因,但我找到了解决方案。你有一个小错误,onKeyDown 第一条语句应该是 if (!(e.ctrlKey || e.metaKey)) return;这意味着我们需要准备 textarea 以便在按下 metaKey 时进行复制(这就是来自 trello 的人的伎俩)。这是来自 trello.com gist.github.com/fustic/10870311 的代码 @VadimIvanov 谢谢。我会在上面修复它。 它在 FF 33.1 中不起作用,因为 el.innerText 未定义,所以我将 clipboard() 函数的最后一行更改为 clip.setValue(el.innerText || el.textContent); 以获得更多的跨浏览器兼容性。链接:jsfiddle.net/AGEf7/31【参考方案4】:

Daniel LeCheminant's code 在将其从 CoffeeScript 转换为 JavaScript (js2coffee) 后对我不起作用。它一直在_.defer() 线上轰炸。

我认为这与 jQuery 延迟有关,所以我将其更改为 $.Deferred(),它现在可以工作了。我在 Internet Explorer 11、Firefox 35 和 Chrome 39 中使用 jQuery 2.1.1 对其进行了测试。用法与丹尼尔的帖子中描述的相同。

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】:

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

有一个以编程方式聚焦的只读输入元素,工具提示按 CTRL-C 进行复制。

当您点击该快捷方式时,输入内容会有效地进入剪贴板。真的很好:)

【讨论】:

以上是关于Trello 如何访问用户的剪贴板?的主要内容,如果未能解决你的问题,请参考以下文章

VB如何利用剪贴板复制、粘贴文件,用到啥API

winXP系统如何打开剪贴板查看器

如何获取文本文件的内容并将其复制到剪贴板?

如何设置一个按钮来添加和转换剪贴板中的数据?

如何让用户使用纯 Javascript 将剪贴板中的图像数据粘贴到 Firefox 中的画布元素中?

如何在 Flutter 上创建复制到剪贴板事件?