Kopieren Sie per Drag & Drop einen Hyperlink in die Zwischenablage, um ihn an anderer Stelle einzufügen

Question

Ich habe keine Erfahrung oder Kenntnisse im Programmieren.

Ich versuche, eine Karte mit Zitaten für einen WordPress-Blogbeitrag zu erstellen.

Auf der Karte befindet sich eine Schaltfläche, mit der Benutzer das Angebot direkt in die Zwischenablage kopieren können.

Ich möchte auch den Hyperlink: (Quelle) zu meiner Website kopieren.

Ich habe diesen Code über GPT ausgeführt und neu geschrieben. Aber jedes Mal kopiert es nur den Text und versucht nicht einmal, die URL zu kopieren.

Ich habe den Code unten angehängt, in der Hoffnung, dass jemand helfen kann, weil ich verrückt werde.

<style>
.card-box {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  border: 2px solid #0077B5;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.quote {
  margin-bottom: 20px;
}

.quote p {
  font-size: 18px;
  line-height: 1.4;
  color: #333333;
}

.quote a {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: black;
  text-decoration: none;
}

.copy-to-clipboard {
  margin-bottom: 20px;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-size: 16px;
  line-height: 1;
  color: #ffffff;
  background-color: #0077B5;
  border: 2px solid #0077B5;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.copy-btn i {
  margin-right: 5px;
}

.signature {
  margin-top: 20px;
  font-size: 12px;
  font-style: italic;
  color: #777777;
}
</style>

<div class="card-box">
  <div class="quote">
    <p id="quoteText">在这里输入您的引用或统计数据</p>
    <a id="sourceLink" href="https://www.example.com">来源</a>
  </div>
  <div class="copy-to-clipboard">
    <button class="copy-btn" onclick="copyToClipboard()"><i class="fas fa-copy"></i> 复制统计数据</button>
  </div>
  <div class="signature">
    <p>Chad Wyatt</p>
  </div>
</div>

<script>
  function copyToClipboard() {
    const quote = document.querySelector('#quoteText').textContent;
    const sourceLink = document.querySelector('#sourceLink').getAttribute('href');
    const copiedText = `引用：${quote}\n来源：${sourceLink}`;
    
    const tempTextArea = document.createElement('textarea');
    tempTextArea.value = copiedText;
    document.body.appendChild(tempTextArea);
    tempTextArea.select();
    document.execCommand('copy');
    document.body.removeChild(tempTextArea);
    
    alert('带有来源链接的引用已复制到剪贴板！');
  }
</script>

Answer 1

我在这里尝试了你的代码 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

对我来说运行良好。