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')命令，这一步都一样。
希望帮到你。

Answer 2

@Ben_Chen 参考您的思路，大体实现如下：

var self = document.getElementById('copy');
if(self!==null) {
  var parent = self.parentElement;
  if(parent===document.body)
    parent.removeChild(self);
}


var selection = window.getSelection();
var range = document.createRange();
var newDiv = document.createElement("div");
newDiv.id='copy'
// newDiv.style.display='none';
document.body.appendChild(newDiv);

newDiv.innerHTML='文字内容';
range.selectNode(document.querySelector('#copy'));
selection.addRange(range);
document.execCommand('copy');