监听浏览器复制粘贴事件&&开箱即用的复制到剪切板

监听键盘ctrl+c ctrl+v

area.onkeydown = (event) => {
if (event.ctrlKey) {
if (event.keyCode == 67) {
alert('ctrl+c复制')
event.keyCode = 0;
}
if (event.keyCode == 86) {
alert('ctrl+v粘贴')
}
}
};

监听浏览器右键复制粘贴

let isRight = false;
area.onmousedown = (event) => { // 右键
event = window.event || event;
if (event.button == 2) {
isRight = true;
}
};
area.oncopy = () => { // 监听浏览器复制事件
if (isRight == true) {
alert('右键复制')
isRight=false
}
};
area.onpaste = () => { // 监听浏览器粘贴事件
if (isRight == true) {
alert('右键粘贴')
isRight=false
}
}

area 是获取的文本域的节点，必须是dom的真实节点

手写一个复制到剪切板的方法

export default function copyToClipboard(text) {
let textArea = document.createElement("textarea");
textArea.style.position = "fixed";
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.width = "2em";
textArea.style.height = "2em";
textArea.style.padding = "0";
textArea.style.border = "none";
textArea.style.outline = "none";
textArea.style.boxShadow = "none";
textArea.style.background = "transparent";
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
let successful = document.execCommand("copy");
let msg = successful
? "成功复制到剪贴板"
: "该浏览器不支持点击复制到剪贴板";
alert(msg);
} catch (err) {
alert("该浏览器不支持点击复制到剪贴板");
}
document.body.removeChild(textArea);
}

最后

以上就是任性雨为你收集整理的监听浏览器复制粘贴事件&&开箱即用的复制到剪切板的全部内容，希望文章能够帮你解决监听浏览器复制粘贴事件&&开箱即用的复制到剪切板所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。