Wie man Text in die Zwischenablage kopiert

Lernen Sie, wie Sie Text in die Zwischenablage mit JavaScript kopieren.

Klicken Sie auf die Schaltfläche, um den Text aus dem Textfeld zu kopieren.

Kopieren Sie den Text in die Zwischenablage

Schritt 1 - HTML hinzufügen:

<!-- Text field -->
<input type="text" value="Hello World" id="myInput">
<!-- Button zum Kopieren des Textes -->
<button onclick="myFunction()">Text kopieren</button>

Schritt 2 - JavaScript hinzufügen:

function myFunction() {
  // Textfeld erhalten
  var copyText = document.getElementById("myInput");
  // Textfeld auswählen
  copyText.select();
  copyText.setSelectionRange(0, 99999); // Für mobile Geräte
   // Text im Textfeld kopieren
  navigator.clipboard.writeText(copyText.value);
  // Angezeigte Textmeldung beim Kopieren
  alert("Copied the text: " + copyText.value);
{}

亲自试一试

Kopierte Text im Tooltips anzeigen

CSS hinzufügen:

.tooltip {
  position: relative;
  display: inline-block;
{}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
{}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
{}
.tooltip:hover .tooltiptext {
  Visibility: Visible;
  Opacity: 1;
{}

亲自试一试