URL aus dem Browser kopieren mit clipboard.js

Ich benutze den Accusoft Document Viewer. Ich habe eine Anforderung für eine Schaltfläche, die beim Anklicken die aktuelle URL plus einen Seitenanzahl-Querystring-Parameter in die Zwischenablage kopiert. Ich verwende clipboard.js. Ich weiß genau, wie man die aktuelle URL erhält und wie man der URL einen Seitennummernparameter hinzufügt. Was ich nicht tun kann, ist, dass Sie mit clipboard.js eine Variable (wie den generierten URL mit Seitennummernparameter) in die Zwischenablage kopieren. Irgendwelche Hilfe dazu?URL aus dem Browser kopieren mit clipboard.js

Quelle

2016-05-25 Michael Mahony

Haben Sie Ihre Variable Inhalt zu platzieren versuchen, in ein verstecktes div und dann dieses div als das Ziel clipboard.js verwenden? –

Clipboard.js Schöpfer hier;)

Sie den Imperativ API, das erreichen verwenden können:

var url = document.location.href; 
 

 
new Clipboard('.btn', { 
 
    text: function() { 
 
    return url; 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script> 
 

 

 
<button class="btn">Copy</button>

Quelle

2016-05-25 23:14:20

Zeno, danke! Das funktioniert perfekt! Eine andere Frage ist, wie man die Tooltip-Show wie eine Demo "kopieren" lässt. Es gibt keinen Beispielcode für dieses. Also, wenn die Kopie fertig ist, möchte ich "kopiert" als eine QuickInfo zeigen, die dann durch die Standard-QuickInfo ersetzt wird, wenn die Maus von der Schaltfläche weggeht. –

Awesome; D Es gibt Tonnen von verschiedenen Möglichkeiten, das zu tun. Zum Beispiel können Sie Bootstrap's Tooltip verwenden: http://stackoverflow.com/questions/37381640/tooltips-highlight-animation-with-clipboard-js-click/37395225 oder einige CSS-basierte Lösung. Sie können den Quellcode von clipboardjs.com überprüfen, wo wir PrimerCSS verwenden: https://github.com/zenorocha/clipboard.js/tree/gh-pages –

Danke Zeno! Es ist mir gelungen, einen Code zu hacken, der für mich funktioniert! Tolles Tool und nochmal, danke für die Eingabe! –

Indem Sie den Inhalt der Variablen in ein Div setzen und dann als Ziel für clipboard.js verwenden ....
Ich muss zugeben, ich habe es nicht versucht, aber es sollte funktionieren.

Ihre Taste (das Beispiel der clipboard.js Website):

<button class="btn" data-clipboard-target="#clipboardTarget"> 
    <img src="assets/clippy.svg" alt="Copy to clipboard"> 
</button> 
<div id="clipboardTarget" style="display:none;"></div>

Platzieren Sie Ihren Variable Inhalt in das Ziel div:

var myData = "http://example.com?data=something"; 
$("#clipboardTarget").html(myData);

Es ist nun bereit, kopiert werden.

-----
EDIT

Ok, nach der Diskussion unten, ich habe wirklich versucht, meine Lösung von Clipboard.js Herunterladen und getestet.
(Eines Tages werde ich lernen vor der Veröffentlichung meiner Lösungen zu testen!)

Es stellte sich heraus, dass es nur auf einem div wenn sichtbar funktioniert.
Traurig.

Also meine Lösung ist falsch.
Ich lasse es hier sowieso ... Als "tun Sie es nicht, es ist eine falsche - gute Idee".

Danke an Michael Mahony für seine Rückmeldung.
;)

Quelle

2016-05-25 16:35:22

Zwei Kommentare, die ich hinzufügen muss. (1) Sie können die Daten nicht von einem Feld abrufen, für das Folgendes festgelegt ist: Keine. Es wirft einen Fehler auf; (2) Ich habe ursprünglich daran gearbeitet, indem ich ein Textfeld benutzt habe und es auf Position gebracht habe: absolut; links: -999em, so dass es auf dem Bildschirm nicht sichtbar ist, aber immer noch über Code erreichbar ist. Es hat funktioniert, aber mit Zenos Vorschlag verwende ich jetzt eine Variable. –

@Michael Mahony: Vielen Dank für Ihr Feedback, ich schätze. Können Sie mir sagen, was für ein Fehler es ist und auf welchem Browser (für mein Wissen), weil ich gerade einen Test mit Chrome gemacht habe, und es funktioniert gut. Kein Fehler und ich habe den html innerhalb einer versteckten Div-Konsole angemeldet. –

@Michael Mahony: Oder ist es eine Einschränkung von Clipboard.js? –

URL aus dem Browser kopieren mit clipboard.js

Antwort

Verwandte Themen