实现文本复制或者剪切到剪切板-Clipboard.js

Clipboard.js-下载地址

引用js文件

<script type="text/javascript" src="./dist/clipboard.min.js"></script>

使用一

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> 
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">  Copy to clipboard</button>

<script>    
    //必须要初始化 第一种初始化    
    var clipboard = new ClipboardJS('.btn');    
    clipboard.on('success', function(e) {        
        console.log(e);    
    });    
    clipboard.on('error', function(e) {        
        console.log(e);    
    });  
</script>

使用二

<div id="btn" data-clipboard-text="复制的内容二">
    <span>Copy</span>
</div>

<script>    
    var btn = document.getElementById('btn');    
    var clipboard = new ClipboardJS(btn);    
    clipboard.on('success', function(e) {        
        console.log(e);    
    });    
    clipboard.on('error', function(e) {        
        console.log(e);    
    });
</script>

使用三

<button data-clipboard-text="1">Copy</button>
<button data-clipboard-text="2">Copy</button>
<button data-clipboard-text="3">Copy</button>

<script>    
    var btns = document.querySelectorAll('button');    
    var clipboard = new ClipboardJS(btns);    
    clipboard.on('success', function(e) {        
        console.log(e);    
    });    
    clipboard.on('error', function(e) {        
        console.log(e);    
    });
</script>

---

// 复制文本到剪贴板
function copyToClipboard(text) {
  navigator.clipboard.writeText(text)
    .then(() => {
      console.log('Text copied to clipboard');
    })
    .catch((error) => {
      console.error('Failed to copy text:', error);
    });
}

// 从剪贴板粘贴文本
function pasteFromClipboard() {
  navigator.clipboard.readText()
    .then((text) => {
      console.log('Text pasted from clipboard:', text);
    })
    .catch((error) => {
      console.error('Failed to paste text:', error);
    });
}

// 示例用法
copyToClipboard('Hello, world!');
pasteFromClipboard();

使用clipboard.js库

// 复制文本到剪贴板
function copyToClipboard(text) {
  var clipboard = new ClipboardJS('.copy-button', {
    text: function() {
      return text;
    }
  });

  clipboard.on('success', function(e) {
    console.log('Text copied to clipboard');
    clipboard.destroy();
  });

  clipboard.on('error', function(e) {
    console.error('Failed to copy text:', e.action);
    clipboard.destroy();
  });

  clipboard.onClick({
    target: document.body
  });
}

// 从剪贴板粘贴文本
function pasteFromClipboard() {
  // 使用clipboard.js无法直接从剪贴板粘贴文本
  console.error('Cannot paste text using clipboard.js');
}

// 示例用法
copyToClipboard('Hello, world!');
pasteFromClipboard();

注意，使用clipboard.js库无法直接从剪贴板粘贴文本，但是你可以通过其他方式来获取粘贴的文本，比如监听paste事件或者使用其他第三方库。

请确保在使用Clipboard API或者clipboard.js之前，你的浏览器支持相关功能。