Heim > Web-Frontend > js-Tutorial > Wie kopiere ich mit jQuery Text in die Zwischenablage des Kunden?

Wie kopiere ich mit jQuery Text in die Zwischenablage des Kunden?

Susan Sarandon
Freigeben: 2024-10-19 12:02:02
Original
729 Leute haben es durchsucht

How to Copy Text to Client's Clipboard with jQuery?

Text mit jQuery in die Zwischenablage des Kunden kopieren

Das Kopieren von Text in die Zwischenablage des Kunden umfasst mehrere Schritte:

  1. Lösen Sie das Kopieren durch einen Klick innerhalb aus ein Textbereich.
  2. Übertragen Sie den ausgewählten Text in die Zwischenablage.
  3. Geben Sie dem Benutzer Feedback zur Aktion.

Um dies mit jQuery zu erreichen, führen Sie die folgenden Schritte aus:

  1. Fügen Sie jQuery in Ihr HTML-Dokument ein, falls es noch nicht vorhanden ist.
<code class="html"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script></code>
Nach dem Login kopieren
  1. Erstellen Sie ein Textarea-Element und hängen Sie einen Ereignis-Listener an sein Klickereignis an:
<code class="html"><textarea id="my-textarea"></textarea>

<script>
$( "#my-textarea" ).on( "click", function() {
  // Get the selected text
  var selectedText = $(this).val();

  // Clipboard API is not supported in all browsers
  if (!navigator.clipboard) {
    console.error("Clipboard API not supported");
    return;
  }

  // Set the selected text to the clipboard
  navigator.clipboard.writeText(selectedText).then(() => {
    // Success
    alert("Text copied to clipboard!");
  }, () => {
    // Error
    alert("Failed to copy text to clipboard");
  });
});
</script></code>
Nach dem Login kopieren

Dieser Ansatz nutzt die Clipboard-API, die von den meisten modernen Browsern unterstützt wird. Wenn Ihre Zielgruppe ältere Browser umfasst, sollten Sie die Verwendung einer Fallback-Methode in Betracht ziehen, z. B. die Verwendung von ZeroClipboard oder Flash, wie in der bereitgestellten Antwort beschrieben.

Das obige ist der detaillierte Inhalt vonWie kopiere ich mit jQuery Text in die Zwischenablage des Kunden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage