Trello如何访问用户的剪贴板？
当您将鼠标悬停在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 / 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平台支持所有浏览器。 我错过了什么？
Sovled感谢VadimIvanov。
看一个有效的例子：http://jsfiddle.net/AGEf7/
链接地址: http://www.djcxy.com/p/3319.html