この翻訳から：どのようにクリップボードにユーザーのTrelloアクセスしていますか？
AカードでのオーバーあなたホバーTrelloとプレスCtrl+ C、これをクリップボードにコピーしたが表示されますで、ISのURLのカードでは。 いつのホバーTrelloにカードを押しにCtrl+ C时、このカードのURLがクリップボードにコピーされます。 彼らはこれを行う方法を教えてください。 彼らはそれがどのように行うのですか？
私の知る限り、そこに関わる一切のFlashムービーではありません。 としては、私の知る限りでは、Flashムービーを含みません。 「I GOTをVeのFlashblockのは、インストール、およびFirefoxネットワークのタブはNOのFlashムービーのロードショー。 私がインストールさFlashblockのが、Firefoxのタブのショーは、ネットワークがFlashムービーをロードされていません。 （すなわちAPOS例えばZeroClipboardによる方法通常、。） （これは、例えば、ZeroClipboard一般的な方法です。）
彼らはどのように？この魔法を達成しない 彼らは、この魔法を達成するにはどうすればよいですか？
（右のこの瞬間を、私を考えての私はANエピファニーを持っていた：によってあなたCANページではオンになっていないSELECT文、SO I彼らは目に見えない要素、彼らのテキストを作成して選択によってJavaScriptコード、および持っていると仮定Ctrl+ C目に見えないことをコピーして、ブラウザのデフォルトの動作でトリガー。ノードのテキスト値を） （現時点では私はひらめきを感じている：あなたは、ページ上のテキストを選択することはできません、私は、彼らが目に見えない要素を持っていると仮定して、彼らはJavaScriptコードによって選択されたテキストを作成Ctrl+ Cトリガーブラウザのコピーのデフォルトの動作ノードのテキスト値は表示されません。）
＃1階
参考：https://stackoom.com/question/1BXna/Trelloユーザーのクリップボードにアクセスする方法
ハウス＃2
情報開示： 私はTrelloを使用するコードで書いた ; 開示： 私は、コードTrelloの使用を書きました。 以下のコードでは、実際のソースコードTrelloは、クリップボードのトリックで達成するために使用するにある。 次のコードは、クリップボードのスキルTrello実際のソースを完了するために使用されますコード。
実際には代わりに、私たちは、OUT Aは、ユーザーの選択に何かするとき押し彼らは便利でビットのヘルプWE「のアクセスユーザーのクリップボード」はそうではありませんCtrl+ C。 私たちは、「ユーザのクリップボードへのアクセス」は、実際にしなかったが、押して、Ctrl+のC選択にヘルプユーザーにとって有用なもの。
あなたはそれを考え出したように聞こえる、 あなたが考え出したように聞こえる、 WEはFACTでのテイクの利点は、あなたがHITすることをCtrl+ C、あなたはでHITに持っていCtrlキーまず。 私たちは、この事実を利用しました：あなたがしたいとき按Ctrl+ C时あなたは押す必要がありますCtrlキーを。 ときCtrlキーであるが、押されたWEのTextAreaにクリップボードザ・ON終わりまで私たちが望むのテキストが含まれており、ITのすべてのテキストを選択することでPOP、ときSOすべてを選択ザ・セットでCキーがヒットした。 ときに押されたCtrlキー、私たちは、クリップボードに終了するテキストが含まれているテキストエリアを、ポップ、およびそれらのすべてのテキストを選択し、ときにCキーがヒットして、すべてのオプションが設定されます。 （時のTextAreaとき、我々は非表示にCtrlキーが立ち上がる） （その後、私たちはCtrl、キーがテキストエリアに表示されます非表示します）
具体的には、Trelloは、この処理を行います。 具体的には、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では、私たちは持っている 私たちが得たDOMに
<div id="clipboard-container"><textarea id="clipboard"></textarea></div>
：CSSのためのクリップボードのスタッフ 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でIT ... SO CANは実際にTextArea内のITのPOPでお会いしていない...しかし、それは。コピー元に「見える」だけで十分です作り 、それは本当にテキストエリアを見ることができないとき...とCSSポップアップ。 ..しかし、コピーする「可視」で十分です。
カードの上にあなたのホバー、それはときに呼び出す あなたホバーカードに、それが呼び出すとき
TrelloClipboard.set(cardUrl)
で選択したときにSOでクリップボードヘルパーは...に何を知っているCtrlキーが押された。 ...そして、クリップボードヘルパーは知っ押すCtrl選択したコンテンツキーを。
ハウス＃3
実際に私内蔵Aクローム拡張まさにこれを行い、そしてすべてのページとWebのため。 実際には、私が構築されたChromeの拡張機能を使用すると、すべてのページのためにこれを行うことができ、。 ソースコードはISのON GitHubの。 ソースコードはGitHub上。
私はTrelloのアプローチと3個のバグを見つける私は、私はそれらを自分自身に直面してきたので、知っている、:) 私は3つの脆弱性Trelloの方法を見つけ、私は私自身が彼らに会ったので、これは知っている:)
コピーは、これらのシナリオでは動作しません ： コピーは、以下の場合には仕事をしません。
- 場合は、既に持っているCtrlプレスホバーA [リンクとHIT Cザ・コピーでは、仕事は。しない あなたが押されている場合はCtrl、キーをして、ホバリングやリンクをクリックしてC、そのコピーは仕事をしません。
- カーソルは、いくつかの他のテキストである場合はページ内のフィールドは、コピーは仕事をしません。 カーソルがページ上の他のテキストフィールドにある場合は、仕事をしませんコピーします。
- カーソルがアドレスバー内にある場合 、コピーは動作しません。 カーソルがアドレスバー内にある場合、レプリカは動作しません。
ユーザーは時に＃1は常に最後の作成ワンヒットの中でむしろ、私HAVING A隠されたスパンが解決しようCtrl/ Cmd。 ユーザーがクリックするのではなく、常に隠されたスパンが存在して、私は＃1を修正しますCtrl/ Cmd時を作成します。
私は一時的にクリアすることで第2位を解く 。、長さゼロの選択をキャレット位置を保存、コピーを行うと、キャレット位置を復元し 、私は一時的に渡された挿入位置の保存、長さゼロの選択をクリアし、コピーと＃2の問題を解決するための挿入位置を復元します。
私は＃の修正見つかっていない 、まだ3 :)（詳細については、私のGitHubのプロジェクトで開いている問題を確認してください）。 私は修正＃3を発見していない:)（詳細については、私のGitHubのプロジェクトを参照してください）問題を解決しません。
＃4階
ON何か非常に似て見ることができますhttp://goo.glとき。アットザ短縮のURL 時間短縮URLを、できるhttp://goo.glは非常に類似した内容を参照してください。
そこに着く読み取り専用の入力要素であるプログラムで集中は、「CTRL-Cを押してコピーするには、」ツールチップで、 読み取り専用の入力要素を持って、プログラム的に焦点を当て、ツールチップ「を押してCTRL-Cコピーします。」 あなたがそのショートカットを押すと、入力内容が効果的にクリップボードに入った。 あなたはショートカットをクリックすると、効果的にクリップボードの内容に入ります。 本当に素敵な:) 非常に良い:)
ハウス＃5
レインコートの（のヘルプでとのGitHubへのリンク）コード、私は平野JavaScriptを使用してクリップボードに実行されているバージョンへのアクセスを得ることができた。 レインコート（での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プラットフォーム Trelloプラットフォームは、すべてのブラウザをサポートしています。 私が行方不明ですか？ 私は何を逃したのですか？
VadimIvanovにSovled感謝。 谢谢VadimIvanov。
A実施例を参照してください：http://jsfiddle.net/AGEf7/ 実施例参照：HTTP：//jsfiddle.net/AGEf7/を
ハウス＃6
のないコードダニエルLeCheminant作業では、JavaScript（へのITのCoffeeScriptを変換した後から、わたしのためにDID js2coffee）。 （JavaScriptのにCoffeeScriptのからザ・ダニエルLeCheminantトランスコーディングjs2coffee私のためにそれ以降）、私のコード無効。 爆撃OUT ON ITに保た_.defer()ライン。 それはされている_.defer()オンライン爆撃。
これに何かを仮定した私は、jQueryのDeferredの作り方をどうSO ITに私が変更$.Deferred()とITの作業は今。 私はそれを変えたので、私は遅延はjQueryのに関連していることを考える$.Deferred()と、それは今働いています。 私は、Internet Explorer 11、でそれをテストしたのjQuery 2.1.1でFirefox 35、とChrome 39。 私はjQueryの2.1.1使用している、それは、Internet Explorer 11のFirefoxとChrome 35ベータ版で39でした。 使い方はダニエルの記事で説明されていると同じ。 用法及びポストで説明したようにダニエルは同じです。
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;
})());
