Gunakan seret dan lepas untuk menyalin hiperpautan ke papan keratan untuk menampal di tempat lain

Question

Saya tiada pengalaman atau pengetahuan tentang pengekodan.

Saya cuba mencipta kad dengan petikan untuk catatan blog WordPress.

Terdapat butang pada kad yang membolehkan pengguna menyalin petikan terus ke papan keratan.

Saya juga ingin menyalin hiperpautan: (Sumber) ke laman web saya.

Saya telah menjalankan kod ini melalui GPT dan menulis semula. Tetapi setiap kali ia hanya menyalin teks dan tidak cuba menyalin URL.

Saya telah melampirkan kod di bawah dengan harapan seseorang boleh membantu kerana saya menjadi gila.

<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

Saya mencuba kod anda di sini https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

Berfungsi dengan baik untuk saya.