Wie greift Trello auf die Zwischenablage des Benutzers zu?

Wenn Sie in Trello mit der Maus über eine Karte fahren und Ctrl+ drücken C, wird die URL dieser Karte in die Zwischenablage kopiert. Wie machen sie das?

Soweit ich das beurteilen kann, handelt es sich nicht um einen Flash-Film. Ich habe Flashblock installiert und auf der Registerkarte "Firefox-Netzwerk" wird kein Flash-Film geladen. (Dies ist die übliche Methode, zum Beispiel von ZeroClipboard.)

Wie erreichen sie diese Magie?

(Im Moment glaube ich, dass ich eine Offenbarung hatte: Sie können keinen Text auf der Seite auswählen, daher gehe ich davon aus, dass sie ein unsichtbares Element haben, in dem sie eine Textauswahl über JavaScript-Code erstellen, und Ctrl+ Cdas Standardverhalten des Browsers auslöst und diesen unsichtbaren kopiert Textwert des Knotens.)

Offenlegung: Ich habe den Code geschrieben, den Trello verwendet . Der folgende Code ist der tatsächliche Quellcode, den Trello verwendet, um den Trick in der Zwischenablage auszuführen.

Wir "greifen nicht auf die Zwischenablage des Benutzers zu", sondern helfen dem Benutzer ein wenig, indem wir etwas Nützliches auswählen, wenn er Ctrl+ drückt C.

Klingt so, als hätten Sie es herausgefunden. Wir nutzen die Tatsache, dass Sie, wenn Sie Ctrl+ drücken möchten, zuerst Cdie CtrlTaste drücken müssen. Wenn die CtrlTaste gedrückt wird, wird ein Textbereich eingeblendet, der den Text enthält, der in der Zwischenablage angezeigt werden soll, und der gesamte darin enthaltene Text ausgewählt, sodass die Auswahl beim Drücken der CTaste festgelegt wird. (Dann verstecken wir den Textbereich, wenn der CtrlSchlüssel kommt)

Insbesondere tut Trello dies:

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

Im DOM haben wir

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

CSS für die Zwischenablage:

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

... und das CSS macht es so, dass Sie den Textbereich nicht sehen können, wenn er eingeblendet wird ... aber er ist "sichtbar" genug, um ihn zu kopieren.

Wenn Sie mit der Maus über eine Karte fahren, wird diese aufgerufen

TrelloClipboard.set(cardUrl)

... damit der Zwischenablage-Helfer weiß, was er auswählen soll, wenn die CtrlTaste gedrückt wird.

Ich habe tatsächlich eine Chrome-Erweiterung erstellt , die genau dies und für alle Webseiten tut. Der Quellcode ist auf GitHub .

Ich finde drei Fehler bei Trellos Ansatz, die ich kenne, weil ich mich ihnen selbst gestellt habe :)

Die Kopie funktioniert in folgenden Szenarien nicht:

1. Wenn Sie bereits Ctrlgedrückt haben und dann einen Link bewegen und drücken C, funktioniert die Kopie nicht.
2. Befindet sich Ihr Cursor in einem anderen Textfeld auf der Seite, funktioniert die Kopie nicht.
3. Befindet sich Ihr Cursor in der Adressleiste, funktioniert die Kopie nicht.

Ich habe # 1 gelöst, indem ich immer eine versteckte Spanne hatte, anstatt eine zu erstellen, wenn der Benutzer Ctrl/ trifft Cmd.

Ich löste # 2, indem ich vorübergehend die Auswahl der Länge Null löschte, die Caret-Position speicherte, die Kopie machte und die Caret-Position wiederherstellte.

Ich habe noch keinen Fix für # 3 gefunden :) (Weitere Informationen finden Sie im offenen Problem in meinem GitHub-Projekt.)

Mit Hilfe des Codes von raincoat ( Link zu GitHub ) gelang es mir, eine laufende Version zu erhalten, die mit einfachem JavaScript auf die Zwischenablage zugreift.

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

Das einzige Problem ist, dass diese Version nur mit Chrome funktioniert. Die Trello-Plattform unterstützt alle Browser. Was fehlt mir?

Dank VadimIvanov.

Siehe ein Arbeitsbeispiel: http://jsfiddle.net/AGEf7/

Daniel LeCheminants Code funktionierte bei mir nicht, nachdem er von CoffeeScript in JavaScript ( js2coffee ) konvertiert wurde . Es bombardierte immer wieder auf der _.defer()Linie.

Ich nahm an, dass dies etwas mit jQuery-Verzögerungen zu tun hat, also habe ich es geändert $.Deferred()und es funktioniert jetzt. Ich habe es in Internet Explorer 11, Firefox 35 und Chrome 39 mit jQuery 2.1.1 getestet. Die Verwendung ist die gleiche wie in Daniels Beitrag beschrieben.

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;

})());

Etwas sehr Ähnliches ist auf http://goo.gl zu sehen, wenn Sie die URL kürzen.

Es gibt ein schreibgeschütztes Eingabeelement, das programmgesteuert fokussiert wird, wobei die QuickInfo CTRL-Czum Kopieren gedrückt wird .

Wenn Sie diese Verknüpfung drücken, wird der Eingabeinhalt effektiv in die Zwischenablage verschoben. Wirklich nett :)