[解決済み] Trelloはどのようにユーザーのクリップボードにアクセスするのですか？

質問

でカードにカーソルを合わせると トレロ を押して Ctrl + C の場合、このカードのURLはクリップボードにコピーされます。これはどうやるのでしょうか？

私の知る限りでは、Flashムービーは関係ありません。私の場合は フラッシュブロック をインストールし、FirefoxのネットワークタブにFlashムービーが読み込まれていないことを表示します。(ZeroClipboardなどでは、通常の方法です)。

このマジックはどうやって実現しているのでしょうか？

(ページ上でテキストを選択することはできないので、不可視の要素を持っていて、そこにJavaScriptのコードでテキスト選択を作成しているのだと思います）。 Ctrl + C は、その不可視ノードのテキスト値をコピーするという、ブラウザのデフォルトの動作をトリガーします)。

解決するには？

ディスクロージャーを行います。 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は、テキストエリアがポップアップするときに実際には見えないようにします...しかし、それはコピーするのに十分なほど"visible"です。

カードにカーソルを合わせると、以下のように呼び出されます。

TrelloClipboard.set(cardUrl)

...そうすれば、クリップボードヘルパーは Ctrl キーが押されたとき。