JS 实现 点击按钮复制文本到剪贴板中

前言

js复制文本到剪切板有很多方法，很多朋友会用开源库，其实纯js的方式实现也很简单。关于复制和剪切板，之前也写过很多文章，例如。 javascript execCommand,复文本框神器 记录一下js光标位置及复制和剪切板 文件上传之剪切板上传及大文件分片上传和断点续传

今天分享一下简单的copy方案。

navigator.clipboard.writeText 方案

这个方案不支持ie,比较简单

var text = 'Example text to appear on clipboard by haorooms.com';
navigator.clipboard.writeText(text).then(
  function () {
    console.log('Haorooms tips: Copying to clipboard was successful!');
  },
  function (err) {
    console.error('haorooms tips: Could not copy text: ', err);
  }
);

document.execCommand(‘copy’)

这些方案博客之前有介绍。可以综合两种方案：

js：

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement('textarea');
  textArea.value = text;

  // Avoid scrolling to bottom
  textArea.style.top = '0';
  textArea.style.left = '0';
  textArea.style.position = 'fixed';

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(
    function () {
      console.log('Async: Copying to clipboard was successful!');
    },
    function (err) {
      console.error('Async: Could not copy text: ', err);
    }
  );
}
var copyBobBtn = document.querySelector('.js-copy-haorooms-btn')

copyBobBtn.addEventListener('click', function (event) {
  copyTextToClipboard(haoroomsinputtext.value);
});

html

  <input type="text" id="haoroomsinputtext" />
    <button class="js-copy-haorooms-btn">haoroomscopybtn</button>

此demo可以之间copy到html种之间运行。