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.)
quelle
Antworten:
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:
Im DOM haben wir
CSS für die Zwischenablage:
... 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
... damit der Zwischenablage-Helfer weiß, was er auswählen soll, wenn die CtrlTaste gedrückt wird.
quelle
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:
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.)
quelle
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.
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/
quelle
el.innerText
es nicht, da es undefiniert war. Daher habe ich die letzte Zeile derclipboard()
Funktion geändert, um dieclip.setValue(el.innerText || el.textContent);
browserübergreifende Kompatibilität zu verbessern. Link: jsfiddle.net/AGEf7/31Daniel 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.quelle
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 :)
quelle