elementui输入控件绑定粘贴事件对复制数据做处理
一、监听输入框粘贴事件
1.1、粘贴事件
//输入框粘贴事件
inputPaste(event, obj, prop) {
var pastedText = undefined
if (event.clipboardData && event.clipboardData.getData) {
pastedText = event.clipboardData.getData('Text');
} else {
pastedText = event.originalEvent.clipboardData.getData('Text');
}
//去空格处理
pastedText = pastedText.replace(/(^\s*)|(\s*$)/g, '');
//完美赋值,无问题
this.$nextTick(_ => {
event.target.value = pastedText;
//赋值需要在全局变量在对象之内
this.$set(obj, prop, pastedText);
});
//延迟赋值,待界面默认渲染效果结束后赋值 赋值有bug
/* setTimeout(_ => {
event.target.value = pastedText
this.$set(obj, prop, pastedText);
this.$forceUpdate();
}, 100); */
},
1.2、控件绑定粘贴事件
<el-input v-model="seachInfo.orderNo" @paste.native="inputPaste($event,seachInfo,'orderNo')"/>
二、监听网页全局复制事件
另行一种思路,监听页面全局复制事件,对复制后的剪贴板数据做处理
document.addEventListener('copy', (e) => {
if (this.isCopy) {
this.isCopy = false;
// this.copyToClipboard('复制成功');
} else {
e.preventDefault();
let clipboardStr = window.getSelection(0).toString();
console.log('clipboardStr: ', clipboardStr);
clipboardStr = clipboardStr.replace(/(^\s*)|(\s*$)/g, '');
//改变剪贴板内的数据 begin
if (window.clipboardData) {
window.clipboardData.setData("text", clipboardStr);
} else {
(function (clipboardStr) {
document.oncopy = function (e) {
e.clipboardData.setData("text", clipboardStr);
e.preventDefault();
document.oncopy = null;
};
})(clipboardStr);
document.execCommand("Copy");
}
//改变剪贴板内的数据 end
}
});
本文作者:Journey&Flower
本文链接:https://www.cnblogs.com/JourneyOfFlower/p/16677934.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步