Kopieren Sie Text mit jQuery ohne Flash_jquery in die Zwischenablage

Wenn Sie im Internet nach einer Lösung suchen, wie Sie einen bestimmten Text in die Zwischenablage kopieren können, ist die Verwendung von Flash das wahrscheinlichste Ergebnis. Obwohl die Verwendung von Flash dieses Problem gut lösen kann, ist dies keine kluge Idee Dieses Produkt wird irgendwann verschwinden oder zumindest nicht mehr von Browsern unterstützt werden, sodass diese Lösung keine Zukunft hat. Es ist möglich, jQuery oder reines JavaScript zu verwenden oder es sogar komplett selbst zu schreiben, aber warum das Rad neu erfinden, wenn jemand bereits eine Lösung erstellt hat? Werfen wir einen Blick auf Clipboard.js.

Clipboard.js entfernt die Flash-Komponente und löst dieses Problem auf elegante Weise. Sie müssen lediglich das Skript einführen, dem HTML-Tag ein „data-clipboard-target“-Attribut zuweisen und einen kurzen Text schreiben Absatz JavaScript-Snippet. Um eine Währungsumrechnungsanwendung zu demonstrieren: Wenn Sie einen Wert in ein Textfeld eingeben, wird das Umrechnungsergebnis in einem anderen Textfeld angezeigt. Wenn auf das Textfeld geklickt wird, wird ein Ereignis ausgelöst, um es in die Zwischenablage zu kopieren und eine Meldung anzuzeigen.

Das Folgende ist meine Implementierung.

Angenommen, dies ist Ihr Textfeld. (Ich verwende das MVC-Framework, um meine Anwendung zu erstellen)

<divclass="row"><divclass="col-md-6">From<divclass="input-group">
<divclass="input-group-addon">$</div>
@Html.EditorFor(model=>model.AmountFrom,new{htmlAttributes=new{@class="form-controlinput-largest",@step="0.01",@type="number"}})
</div></div><divclass="col-md-6">To<divclass="input-group"><divclass="input-group-addon">$
</div><inputtype="text"id="AmountTo"value="@Model.AmountTo"class="form-controlinput-largest"readonlydata-clipboard-action="copy"data-clipboard-target="#AmountTo"/>
</div>
</div>
</div>

Ist Ihnen aufgefallen, dass ich einen AmountTo habe und ein AmountFrom die Eingabe und AmountFrom die Ausgabe ist? Wenn wir darauf klicken, wird sein Wert an die Zwischenablage übergeben. Die Magie geschieht innerhalb der Eigenschaft „data-clipboard-target“.

Wir fügen außerdem ein Meldungsfeld hinzu, um die Kopieraktionsnachricht anzuzeigen

<divclass="row">
<divclass="col-md-6"><br/>
<spanid="messageBox"class="text-success"style="display:block;text-align:center"></span></div></div>

Dies ist der HTML-Teil, der Ihnen wichtig ist. Kommen wir nun zum JavaScript/jQuery-Teil

<scriptsrc="~/Scripts/clipboard.min.js">
</script>
<script>varclipboard=newClipboard(&apos;#AmountTo&apos;);
clipboard.on(&apos;success&apos;,function(e){$("#messageBox").text("AmountSuccessfullyCopied!").show().fadeOut(2000);e.clearSelection();});clipboard.on(&apos;error&apos;,function(e){$("#messageBox").text("ErrorCopyingAmount").show().fadeOut(2000);});$(&apos;#AmountFrom&apos;).click(function(){$("#AmountFrom").val("");});
</script>

An dieser Stelle werden Sie feststellen, dass wir nur clipoard.js eingeführt haben. Wenn die Zwischenablage erfolgreich instanziiert wurde, werden dem Ereignis einige Aktionen zugewiesen, andernfalls wird ein Fehler ausgelöst, oder? Das ist alles in Ordnung und funktioniert mit allen aktuellen Browsern außer IE, der eine Meldung wie die folgende ausgibt.

Wenn Sie es in Aktion sehen möchten, finden Sie hier ein JSFiddle-Beispiel.

Der nächste Schritt besteht darin, die Daten aus der Zwischenablage zu erfassen und beim Klicken automatisch in ein Textfeld einzufügen. An dieser Stelle scheint es, dass der Browser dies aufgrund eines Sicherheitsrisikos verhindert, aber ich werde versuchen, sie zu finden oder sogar zu erstellen eine Lösung, also muss jeder weiterhin aufpassen.