当您将鼠标悬停在Trello中的一张卡片上并按Ctrl+C时，该卡的URL会复制到剪贴板中。他们是怎么做到的?
据我所知，这与闪电侠电影无关。我已经安装了Flashblock, Firefox网络选项卡显示没有加载Flash电影。(这是常用的方法，例如ZeroClipboard。)
他们是如何实现这种魔力的?
(此时此刻，我想我有一个顿悟:你不能选择页面上的文本，所以我假设他们有一个不可见的元素，在那里他们通过JavaScript代码创建一个文本选择，Ctrl+C触发浏览器的默认行为，复制那个不可见节点的文本值。)
当前回答
在GitHub上的raincoat代码的帮助下，我设法获得了一个使用纯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/
其他回答
披露: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让你看不到文本区域，当它弹出时…但它是“可见的”，足以复制。
当你将鼠标悬停在一张卡片上时，它会调用
TrelloClipboard.set(cardUrl)
．.． 这样当按下Ctrl键时，剪贴板助手就知道要选择什么。
当您缩短URL时，可以在http://goo.gl上看到非常类似的情况。
有一个以编程方式聚焦的只读输入元素，工具提示按Ctrl+C进行复制。
当您点击该快捷方式时，输入内容有效地进入剪贴板。真的很好:)
在GitHub上的raincoat代码的帮助下，我设法获得了一个使用纯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/
Daniel LeCheminant的代码在我将CoffeeScript转换为JavaScript (js2coffee)后并不适用。它一直轰炸_.defer()行。
我假设这与jQuery延迟有关，所以我将其更改为$. deferred()，现在它正在工作。我在Internet Explorer 11、Firefox 35和Chrome 39中用jQuery 2.1.1测试了它。用法和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;
})());
我实际上建立了一个Chrome扩展，正是这一点，并为所有网页。源代码在GitHub上。
我发现Trello的方法有三个漏洞，我知道，因为我自己也遇到过。
拷贝在以下情况下不起作用:
如果您已经按下Ctrl键，然后悬停一个链接并单击C，则复制将不起作用。 如果您的光标位于页面中的其他文本字段，则复制将不起作用。 如果您的光标在地址栏上，则复制不能工作。
我解决了#1，总是有一个隐藏的跨度，而不是创建一个当用户点击Ctrl/Cmd。
我通过临时清除零长度选择，保存插入符号位置，进行复制并恢复插入符号位置来解决#2。
我还没有找到#3的修复程序:)(有关信息，请检查我的GitHub项目中的开放问题)。
