Kopieren Sie per Drag & Drop einen Hyperlink in die Zwischenablage, um ihn an anderer Stelle einzufügen
P粉419164700
P粉419164700 2024-01-16 21:38:10
0
1
398

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>

P粉419164700
P粉419164700

Antworte allen(1)
P粉269847997

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

对我来说运行良好。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage