Jak Trello uzyskuje dostęp do schowka użytkownika?

Właściwie zbudowałem Rozszerzenie Chrome , które robi dokładnie to, i dla wszystkich stron internetowych. Kod źródłowy jest na GitHub.

Przy podejściu Trello znalazłem trzy błędy, które znam, bo sam się z nimi zmierzyłem:)

Kopia nie działa w tych scenariuszach:

1. Jeśli masz już Ctrl wciśnięty, a następnie najedź kursorem na link i naciśnij C , Kopia nie działa.
2. jeśli kursor znajduje się w innym polu tekstowym na stronie, Kopia nie działa.
3. jeśli kursor znajduje się na pasku adresu, Kopia nie działa.

Rozwiązałem #1 zawsze mając ukrytą rozpiętość, zamiast tworzyć ją, gdy użytkownik naciśnie Ctrl/Cmd .

Rozwiązałem #2, tymczasowo wyczyszczając zaznaczenie o zerowej długości, zapisując pozycję karetki, wykonując kopię i przywracając pozycję karetki.

Nie znalazłem jeszcze poprawki dla #3:) (Aby uzyskać informacje, Sprawdź otwarty problem w moim projekcie GitHub).

Z pomocą kodu raincoat na Githubie , udało mi się uzyskać dostęp do schowka z uruchomioną wersją za pomocą zwykłego 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");

Zobacz działający przykład: http://jsfiddle.net/AGEf7/

Kod Daniela Lecheminanta nie zadziałał u mnie po przekonwertowaniu go z CoffeeScript do JavaScript (js2coffee). / Align= "left" / linear

Założyłem, że to ma coś wspólnego z jQuery deferreds, więc zmieniłem na $.Deferred() i teraz działa. Testowałem go w Internet Explorer 11, Firefox 35 i Chrome 39 z jQuery 2.1.1. Użycie jest takie samo jak opisane w poście Daniela.

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;

})());

Coś bardzo podobnego można zobaczyć na http://goo.gl Kiedy skracasz adres URL.

Jest Tylko do odczytu element wejściowy, który jest programowo skupiony, z tooltip naciśnij CTRL-C, aby skopiować.

Po naciśnięciu tego skrótu, zawartość wejściowa skutecznie dostaje się do schowka. Naprawdę ładne :)