Javascript kann nicht kopieren-Front-End-Fragen und Antworten-php.cn

JavaScript ist eine in der Webentwicklung weit verbreitete Skriptsprache, die eine Reihe von Aufgaben wie dynamische Interaktion von Webseiten, Datenvalidierung, Formularoperationen usw. ausführen kann. Bei der Verwendung von JavaScript stoßen wir jedoch manchmal auf ein häufiges Problem: Textinhalte können nicht kopiert werden. In diesem Artikel gehen wir der Ursache dieses Problems auf den Grund und stellen einige Lösungen bereit, damit Sie Probleme beim Kopieren von Texten in Ihrer Entwicklung reibungsloser bewältigen können.

Warum kann JavaScript keinen Text kopieren?

Zunächst müssen wir verstehen, warum JavaScript keine Textinhalte kopieren kann. Tatsächlich liegt die häufigste Ursache dieses Problems in den Sicherheitsmechanismen moderner Browser. Wenn ein Benutzer versucht, Textinhalte über JavaScript-Code zu kopieren, fängt der Browser den Vorgang automatisch ab, um die Systemsicherheit des Benutzers zu schützen. Denn wenn JavaScript-Code auf den Inhalt der Zwischenablage des Benutzers zugreifen kann, kann jeder bösartigen Code schreiben und auf vertrauliche Informationen des Benutzers zugreifen, beispielsweise auf Passwörter, Kreditkarteninformationen usw. Daher verhindern Browser häufig, dass JavaScript Text aus der Zwischenablage liest oder schreibt.

Lösung

Während moderne Browser-Sicherheitsmechanismen das Kopieren von Text mit JavaScript erschweren, ist es nicht völlig unmöglich. Im Folgenden stellen wir einige Lösungen zur Lösung dieses Problems vor.

Verwenden der Methode document.execCommand()

Die Methode document.execCommand() ist eine JavaScript-Methode, die einige Benutzerbefehle ausführen kann. Es kann die Benutzeroberfläche bedienen und mit dem System interagieren, darunter auch Kopiervorgänge. Diese Methode muss während einer vom Benutzer initiierten Aktion aufgerufen werden, z. B. beim Klicken auf eine Schaltfläche oder beim Verwenden einer Tastenkombination. Hier ist ein Beispielcode:

function copyToClipboard(id) {
  var text = document.getElementById(id).innerText;
  var textarea = document.createElement("textarea");
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
}

Nach dem Login kopieren

Im obigen Code definieren wir eine copyToClipboard()-Funktion, die eine Parameter-ID akzeptiert, die die Element-ID darstellt, in der sich der zu kopierende Text befindet. Die Logik dieser Funktion ist wie folgt:

Zuerst verwenden wir das innerText-Attribut, um den Textinhalt aus dem angegebenen Element abzurufen.
Dann erstellen wir mit der Methode createElement() ein Textarea-Element und weisen den Textinhalt seinem Wertattribut zu.
Als nächstes fügen wir das Textarea-Element zum Dokument hinzu (vor dem letzten -Tag).
Dann verwenden wir die Methode select(), um den Textinhalt im Textarea-Element auszuwählen.
Abschließend rufen wir die Methode document.execCommand() auf, um den Kopiervorgang durchzuführen.
Verwenden Sie die Bibliothek „clipboard.js“

clipboard.js ist eine JavaScript-Bibliothek, die uns dabei helfen kann, Textkopiervorgänge einfach zu implementieren. Für diese Bibliothek ist kein Aufruf der Methode document.execCommand() erforderlich. Die Bibliothek „clipboard.js“ basiert auf autorisierten Browser-APIs und nicht auf Ereignissen zum Kopieren und Einfügen. Mit dieser Bibliothek können wir eine einfache Funktion zum Kopieren von Text implementieren, indem wir eine kleine Menge JavaScript-Code schreiben. Hier ist ein Beispielcode, der die Bibliothek „clipboard.js“ verwendet:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Clipboard.js Sample</title>
  <!-- 引入clipboard.js库 -->
  <script src="clipboard.js"></script>
  <style type="text/css">
    div {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="copy-btn" data-clipboard-text="Hello, world!">
    Click me!
  </div>

  <script>
    // 初始化clipboard.js库
    new ClipboardJS('.copy-btn');
  </script>
</body>
</html>

Nach dem Login kopieren

Im obigen Beispielcode haben wir zuerst die Bibliothek „clipboard.js“ eingeführt und dann ein div-Element mit dem Attribut „data-clipboard-text“ definiert. Diese Eigenschaft wird zum Speichern des zu kopierenden Textinhalts verwendet. Schließlich initialisieren wir im Tag

Neueste Artikel des Autors