javascript实现自动复制内容到粘贴板

Question

尝试了用clipboard.js，但是需要点击按钮触发，自动执行点击事件也无效<button class="btn" data-clipboard-text="测试的文本">复制</button>......<script>  $('.btn').bind("myClick", () => {    var clipboard = new Clipboard('.btn')    console.log('success!')  })  $('.btn').trigger("myClick")</script>   document.execCommand()也尝试过， 也是需要按钮触发

Answer 1

点击自动复制这块儿，目前 WebApi 不是很稳定，兼容性也不是很好，Chrome ,FF ,Safari 也还好。谈谈我以前的实现吧。

其实大的可以分为两种：

1、如果你的内容是在 input 框里面，当然也包括 textarea 等，实现相对简单：

<input id="input" value="hello world"/>

const copyInputValue = (input) => {

  const valueLength = input.value.length;

  input.focus();

  input.setSelectionRange(0, valueLength);

  return document.execCommand('copy');

}

copyInputValue(document.getElementById('input'));

2、另外一种是复制复制普通元素内文本：具体的代码我就不写了。

思路就是：通过 window.getSelection() 获取选取，然后初始化一个 Range ,然后 add进 selection ，然后执行复制命令。

整体的思路就是：把文本想办法添加进选取，这一步的兼容性做好，然后执行 document.execCommand('copy')命令，这一步都一样。

希望帮到你。