本篇内容介绍了“js剪切、复制和粘贴功能怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
针对现代浏览器实现（Navigator.clipboard）
Navigator.clipboard API可以用来访问系统剪贴板，可以实现【剪切、复制、粘贴】功能。该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式，不兼容 IE。
使用 Navigator.clipboard API时会弹出用户授权弹窗。如果用户没有授予权限，则不允许读取或更改剪贴板内容。
let clipBoard = navigator.clipboard;
// 写入文本至操作系统剪贴板
clipBoard.writeText('你好').then(() => {
this.$message.success('复制成功！')
})
// 写入任意数据（比如图片）至操作系统剪贴板用 clipBoard.write()
// 从剪贴板读取文本
clipBoard.readText().then(clipText => {
console.log(clipText);
})
// 从剪贴板读取数据（比如图片）用 clipBoard.read()针对旧版本浏览器实现（document.execCommand）
document.execCommand 针对可编辑内容区域提供了很多有用的 API，包括其中的【剪切、复制、粘贴】功能。
MDN 写到 document.execCommand 方法已废弃。
document.execCommand 的复制有个前提，必须先选中内容，但有时候我们要实现的效果是没有选中这个动作的，比如在手机号后面有个“复制”按钮，点击按钮就直接复制了手机号，这里我们有2种方法实现：
方法1：在 body 动态追加一个隐藏的文本域，再用 select() 方法选中里面的内容，接着 document.execCommand('copy') 进行复制。
function copyText (text) {
$('body').append(`<textarea id="iclip-container" value="${text}">${text}</textarea>`);
$('#iclip-container').select();
if (document.execCommand('copy', false, null)) {
$('#iclip-container').remove();
alert('复制成功！')
}
}方法2：监听 copy 事件，在事件回调里添加要复制的内容。
function copyText (text) {
const copy = function(event) {
let clipboardData = event.clipboardData || window.clipboardData;
clipboardData.setData('text/plain', text);
event.preventDefault();
};
document.addEventListener('copy', copy);
document.execCommand('copy');
document.removeEventListener('copy', copy);
this.$message.success('复制成功！');
},剪切、复制、粘贴事件
可以给元素绑定 cut、copy、paste 事件监听剪切、复制、粘贴行为。
// 可以监听 cut 事件对剪切内容进行修改
const source = document.querySelector('div.source');
source.addEventListener('cut', (event) => {
const selection = document.getSelection();
event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
selection.deleteFromDocument();
event.preventDefault();
});