本文主要和大家分享js实现粘贴到剪贴板实例代码，目前常见的实现粘贴到剪贴板主要有以下两种方法，希望能帮助到大家。
第三方库 clipboard
原生js, 主要是 document.execcommand方法
第一种方法按照文档说明，设置触发元素的data-clipboard-text 或者 data-clipboard-target即可，不做说明，详见文档
第二种方法：
document.execcommand
这个方法的兼容性其实不算很好，特别是移动端，具体这里有, 但clipboard针对部分机型也有问题，所以具体使用还是得看情况， 使用该方法前要先看浏览器是否支持bool = document.execcommand(‘copy’)
mdn对上述方法的解释如下：
当一个html文档切换到设计模式 designmode时，文档对象暴露 execcommand 方法，该方法允许运行命令来操纵可编辑区域的内容。
注意加粗部分，设计模式 ，即：使用前我们需切换文档模式为设计模式
document.designmode = 'on'
完成运行命令之后再设置值为off
还有个加粗部分，可编辑区域 ，默认的input和textarea元素是可编辑(设置一个元素的contenteditable=”true”也可激活元素的编辑模式)
先来看表单元素如何实现
ele.addeventlistener('click', () => { document.designmode = 'on'
let bool = document.execcommand('copy') if (!bool) {
alert('sorry, 手动复制吧')
} else { let val = 'something'
let inputele = document.createelement('input') document.body.appendchild(inputele)
inputele.setattribute('value', val)
inputele.setattribute('readonly', 'readonly')
inputele.select() document.execcommand('copy') document.body.removechild(inputele)
alert('copied')
} document.designmode = 'off'})
为避免出现光标或者拉起输入法，需要给元素设置readonly属性
inputele.select()方法在一些浏览器中有时不能选中所有内容，这时需要利用inputeelement的setselectionrange方法：
htmlinputelement.setselectionrange 方法可以从一个被 focused 的
元素中选中特定范围的内容。
综上加两行：
...inputele.focus()
inputele.setselectionrange(0, inputele.value.length)
document.execcommand('copy')...
如果不是input等表单元素，不能使用select和setselectrange的话，那么我们可以使用getselection和createrange方法来模拟这个过程了，selection对象表示用户选择的文本范围或光标的当前位置，满足执行execcomman命令的可编辑活动区域，如下
let range = document.createrange()let tar = document.queryselector('#code')
range.selectnodecontents(tar)let selection = window.getselection()
selection.removeallranges()
selection.addrange(range)document.execcommand('copy')
selection.removeallranges()
上述针对非input，textarea等表单元素也能实现了
原文链接：segmentfault.com
详细文章：https://github.com/axuebin/articles/issues/26
目前常见的实现粘贴到剪贴板主要有以下两种方法：
第三方库 clipboard
原生js, 主要是 document.execcommand方法
第一种方法按照文档说明，设置触发元素的data-clipboard-text 或者 data-clipboard-target即可，不做说明，详见文档
第二种方法：
document.execcommand
这个方法的兼容性其实不算很好，特别是移动端，具体这里有, 但clipboard针对部分机型也有问题，所以具体使用还是得看情况， 使用该方法前要先看浏览器是否支持bool = document.execcommand(‘copy’)
mdn对上述方法的解释如下：
当一个html文档切换到设计模式 designmode时，文档对象暴露 execcommand 方法，该方法允许运行命令来操纵可编辑区域的内容。
注意加粗部分，设计模式 ，即：使用前我们需切换文档模式为设计模式
document.designmode = 'on'
完成运行命令之后再设置值为off
还有个加粗部分，可编辑区域 ，默认的input和textarea元素是可编辑(设置一个元素的contenteditable=”true”也可激活元素的编辑模式)
先来看表单元素如何实现
ele.addeventlistener('click', () => { document.designmode = 'on'
let bool = document.execcommand('copy') if (!bool) {
alert('sorry, 手动复制吧')
} else { let val = 'something'
let inputele = document.createelement('input') document.body.appendchild(inputele)
inputele.setattribute('value', val)
inputele.setattribute('readonly', 'readonly')
inputele.select() document.execcommand('copy') document.body.removechild(inputele)
alert('copied')
} document.designmode = 'off'})
为避免出现光标或者拉起输入法，需要给元素设置readonly属性
inputele.select()方法在一些浏览器中有时不能选中所有内容，这时需要利用inputeelement的setselectionrange方法：
htmlinputelement.setselectionrange 方法可以从一个被 focused 的
元素中选中特定范围的内容。
综上加两行：
...inputele.focus()
inputele.setselectionrange(0, inputele.value.length)
document.execcommand('copy')...
如果不是input等表单元素，不能使用select和setselectrange的话，那么我们可以使用getselection和createrange方法来模拟这个过程了，selection对象表示用户选择的文本范围或光标的当前位置，满足执行execcomman命令的可编辑活动区域，如下
let range = document.createrange()let tar = document.queryselector('#code')
range.selectnodecontents(tar)let selection = window.getselection()
selection.removeallranges()
selection.addrange(range)document.execcommand('copy')
selection.removeallranges()
上述针对非input，textarea等表单元素也能实现了
相关推荐：
javascript复制内容到剪贴板实现代码
js操作剪贴板代码分享
javascript实现复制到剪贴板的方法总结
以上就是js实现粘贴到剪贴板实例代码分享的详细内容。