カードの上にマウスを移動するとトレロCtrl+を押すとC、このカードの URL がクリップボードにコピーされます。これはどうやって行うのでしょうか?
私の知る限り、Flashムービーは関係ありません。フラッシュブロックインストールされ、Firefox のネットワーク タブには Flash ムービーが読み込まれていないことが表示されます (これは、たとえば ZeroClipboard による通常の方法です)。
彼らはどうやってこの魔法を実現するのでしょうか?
(ちょうどこの瞬間、私はひらめいたと思います。ページ上でテキストを選択することはできないので、JavaScript コードを介してテキスト選択を作成し、Ctrl+ によってCブラウザのデフォルトの動作をトリガーして、その非表示ノードのテキスト値をコピーする非表示要素があると考えました。)
ベストアンサー1
開示: Trelloが使用するコードを書いた; 以下のコードは、Trello がクリップボード トリックを実行するために使用する実際のソース コードです。
実際に「ユーザーのクリップボードにアクセスする」のではなく、ユーザーがCtrl+を押したときに何か便利なものを選択することで、ユーザーを少しサポートしますC。
どうやらお分かりのようですね。Ctrl+を押したいときは、まずキーをC押す必要があるという事実を利用しています。キーが押されると、クリップボードにコピーしたいテキストを含むテキストエリアがポップアップ表示され、その中のすべてのテキストが選択されます。そのため、キーが押されたときに選択がすべて設定されます。(その後、キーが押されたときにテキストエリアを非表示にします。)CtrlCtrlCCtrl
具体的には、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キーが押されたときに何を選択するかを認識します。