다른 곳에 붙여넣기 위해 드래그 앤 드롭을 사용하여 하이퍼링크를 클립보드에 복사합니다.

Question

저는 코딩에 대한 경험이나 지식이 없습니다.

WordPress 블로그 게시물에 대한 인용문이 포함된 카드를 만들려고 합니다.

카드에는 사용자가 인용문을 클립보드에 직접 복사할 수 있는 버튼이 있습니다.

내 웹사이트에 대한 하이퍼링크(출처)도 복사하고 싶습니다.

저는 이 코드를 GPT를 통해 실행하고 다시 작성했습니다. 하지만 매번 텍스트만 복사하고 URL 복사도 시도하지 않습니다.

내가 미쳐가고 있으니 누군가가 도움을 줄 수 있기를 바라며 아래 코드를 첨부했습니다.

<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

저한테는 잘 맞네요.