卡卡網(wǎng)

前面介紹過使用js復(fù)制插件clipboard.js無需flash文件的文章，本文介紹另一個(gè)文字復(fù)制的JS實(shí)現(xiàn)方法，這個(gè)方法無需用到第三方插件，是純JS實(shí)現(xiàn)的。

demodownload

HTML

<p>This is <a href="" class="copy-click" data-tooltip-text="Click to copy" data-tooltip-text-copied="? Copied to clipboard">a string you can copy</a>.</p>

復(fù)制文字是a鏈接標(biāo)簽的文本內(nèi)容。a標(biāo)簽class值是copy-click，data-tooltip-text是鼠標(biāo)移到文字上時(shí)的提示文字，data-tooltip-text-copied是點(diǎn)擊后的提示文字。

我們也可以把要復(fù)制的內(nèi)容寫到a鏈接標(biāo)簽里，HTML代碼如下：

<a href="" class="copy-click"
  data-copy-string="#ITN12345"
  data-tooltip-text="Click to copy"
  data-tooltip-text-copied="? Copied to clipboard">
  Text to display
</a>

點(diǎn)擊文字后，data-copy-string的值“#ITN12345”就被復(fù)制到剪貼板。

JS

const links = document.querySelectorAll('.copy-click');
const cls = {
  copied: 'is-copied',
  hover: 'is-hovered' };


const copyToClipboard = str => {
  const el = document.createElement('input');
  str.dataset.copyString ? el.value = str.dataset.copyString : el.value = str.text;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.opacity = 0;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};

const clickInteraction = e => {
  e.preventDefault();
  copyToClipboard(e.target);
  e.target.classList.add(cls.copied);
  setTimeout(() => e.target.classList.remove(cls.copied), 1000);
  setTimeout(() => e.target.classList.remove(cls.hover), 700);
};

Array.from(links).forEach(link => {
  link.addEventListener('click', e => clickInteraction(e));
  link.addEventListener('keypress', e => {
    if (e.keyCode === 13) clickInteraction(e);
  });
  link.addEventListener('mouseover', e => e.target.classList.add(cls.hover));
  link.addEventListener('mouseleave', e => {
    if (!e.target.classList.contains(cls.copied)) {
      e.target.classList.remove(cls.hover);
    }
  });
});

該JS代碼，復(fù)制功能的實(shí)現(xiàn)使用了execCommand()方法，該方法在firefox，chrome等瀏覽器均可用。

注意事項(xiàng)

該實(shí)例在IE瀏覽器無效。

相關(guān)文章

• ZeroClipboard過時(shí)了，js復(fù)制插件clipboard.js無需flash文件

標(biāo)簽: copy  復(fù)制  復(fù)制文字  copyToClipboard