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
    }
});
posted @ 2022-09-10 17:34  Journey&Flower  阅读(434)  评论(0编辑  收藏  举报