//一鍵復制
const copyBtn = document.querySelector('.copy-btn');
const content = document.querySelector('.content');
const handleCopy = () => {
const range = document.createRange();
range.selectNode(content);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execmand('copy');
window.getSelection().removeAllRanges();
const tooltip = document.createElement('div');
tooltip.classList.add('tooltip');
tooltip.innerHTML = '<i class="fa fa-check"></i> 復制成功';
document.body.appendChild(tooltip);
setTimeout(() => {
  tooltip.remove();
}, 2000);
};
copyBtn.addEventListener('click', handleCopy);

.copy-btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  }

  .tooltip {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 123, 255, 0.8);
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  }

  .tooltip i {
  margin-right: 8px;
  }

<button class="copy-btn">復制</button>

QQ20230601201038.png(1.37 KB, 下載次數: 35)

2023-6-1 20:12 上傳