Bagaimana Trello mengakses clipboard pengguna?

Ketika Anda membawa kartu di Trello dan tekan Ctrl+C , URL kartu ini disalin ke clipboard. bagaimana mereka melakukan ini?

Sejauh yang saya tahu, tidak ada film Flash yang terlibat. Saya telah menginstal Flashblock , dan tab jaringan Firefox tidak menunjukkan film Flash dimuat. (Itu metode yang biasa, misalnya, oleh ZeroClipboard.)

Bagaimana mereka mencapai keajaiban ini?

(Tepat pada saat ini saya pikir saya memiliki epifani: Anda tidak dapat memilih teks pada halaman, jadi saya menganggap mereka memiliki elemen tak terlihat, di mana mereka membuat pemilihan teks melalui kode JavaScript, dan Ctrl+ Cmemicu perilaku default browser, menyalin yang tidak terlihat nilai teks simpul.)

Pengungkapan: Saya menulis kode yang digunakan Trello ; kode di bawah ini adalah kode sumber aktual yang digunakan Trello untuk menyelesaikan trik clipboard.

Kami sebenarnya tidak "mengakses clipboard pengguna", melainkan kami membantu pengguna keluar sedikit dengan memilih sesuatu yang bermanfaat ketika mereka menekan Ctrl+ C.

Kedengarannya seperti Anda sudah mengetahuinya; kami mengambil keuntungan dari kenyataan bahwa ketika Anda ingin menekan Ctrl+ C, Anda harus menekan Ctrltombol terlebih dahulu. Ketika Ctrltombol ditekan, kita memunculkan teks yang berisi teks yang ingin kita akhiri di clipboard, dan pilih semua teks di dalamnya, sehingga pemilihan semua diatur ketika tombol Cditekan. (Kemudian kita menyembunyikan textarea saat Ctrlkunci muncul)

Secara khusus, Trello melakukan ini:

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) ->

Di DOM kita punya

<div id="clipboard-container"><textarea id="clipboard"></textarea></div>

CSS untuk hal-hal clipboard:

#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;
}

... dan CSS membuatnya sehingga Anda tidak bisa benar-benar melihat textarea ketika muncul ... tapi itu "terlihat" cukup untuk menyalin.

Ketika Anda mengarahkan kursor ke atas kartu, kartu itu memanggil

TrelloClipboard.set(cardUrl)

... jadi penolong clipboard tahu apa yang harus dipilih ketika Ctrltombol ditekan.

Saya sebenarnya membangun ekstensi Chrome yang melakukan ini, dan untuk semua halaman web. Kode sumber ada di GitHub .

Saya menemukan tiga bug dengan pendekatan Trello, yang saya tahu karena saya sudah menghadapinya sendiri :)

Salinan tidak berfungsi dalam skenario ini:

1. Jika Anda telah Ctrlmenekan dan kemudian mengarahkan tautan dan tekan C, salinan tidak berfungsi.
2. Jika kursor Anda berada di bidang teks lain di halaman, salinannya tidak berfungsi.
3. Jika kursor Anda ada di bilah alamat, salinannya tidak berfungsi.

Saya memecahkan # 1 dengan selalu memiliki rentang tersembunyi, daripada membuatnya ketika pengguna memukul Ctrl/ Cmd.

Saya memecahkan # 2 dengan menghapus sementara pilihan zero-length, menyimpan posisi caret, melakukan copy dan mengembalikan posisi caret.

Saya belum menemukan perbaikan untuk # 3 :) (Untuk informasi, periksa masalah terbuka di proyek GitHub saya).

Dengan bantuan kode ( tautan ke GitHub ) jas hujan , saya berhasil mendapatkan versi yang sedang berjalan mengakses clipboard dengan JavaScript biasa.

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");

Satu-satunya masalah adalah, bahwa versi ini hanya berfungsi dengan Chrome. Platform Trello mendukung semua browser. Apa yang saya lewatkan?

Terimakasih berkat VadimIvanov.

Lihat contoh yang berfungsi: http://jsfiddle.net/AGEf7/

Kode Daniel LeCheminant tidak berfungsi untuk saya setelah mengubahnya dari CoffeeScript ke JavaScript ( js2coffee ). Itu terus membom di _.defer()telepon.

Saya berasumsi ini ada hubungannya dengan jQuery yang ditangguhkan, jadi saya mengubahnya $.Deferred()dan berfungsi sekarang. Saya mengujinya di Internet Explorer 11, Firefox 35, dan Chrome 39 dengan jQuery 2.1.1. Penggunaannya sama seperti yang dijelaskan dalam posting 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;

})());

Sesuatu yang sangat mirip dapat dilihat di http://goo.gl ketika Anda mempersingkat URL.

Ada elemen input yang hanya bisa dibaca yang berfokus pada program, dengan tooltip tekan CTRL-Cuntuk menyalin.

Ketika Anda menekan pintasan itu, konten input secara efektif masuk ke clipboard. Benar-benar bagus :)