javascript实现自动复制内容到粘贴板
问题描述:
尝试了用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()也尝试过, 也是需要按钮触发
第 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')命令,这一步都一样。
希望帮到你。
第 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');
如下,commonDo可能被多个方法(有可能不同步的)调用,在specialDo调用commonDo会重入锁,对性能影响大吗?是不是最好把commonDo()的代码直接放在specialDo里比较好?虽 ...