Vue监听浏览器自带的复制事件并对复制内容进行修改

2023-12-29 11:57:37
场景:

在使用鼠标右键或者ctrl c的时候。光标会自动换行。粘贴出来的数据光标应该在红色部分,却出现在了黑色部分。

方法一:?

html标签不要换行;css去除空格;

white-space: nowrap;
?方法二:

使用函数对复制的内容进行修改。同理即可在复制文本后追加产权标签等等。

    mounted() {
        document.addEventListener('copy', function (e) {
            // clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的,也就是你复制或者剪切内容
            let clipboardData = e.clipboardData || window.clipboardData;
            // 如果 未复制或者未剪切,直接 return 
            if (!clipboardData) return;
            // Selection 对象 表示用户选择的文本范围或光标的当前位置。
            // 声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
            let text = window.getSelection().toString();
            if (text) {
                // 如果文本存在,首先取消默认行为
                e.preventDefault();
                // 通过调用 clipboardData 对象的 setData(format,data) 方法,设置相关文本 
                // format 一个 DOMString 类型 表示要添加到 drag object 的拖动数据的类型
                // data 一个 DOMString 表示要添加到 drag object 的数据
                clipboardData.setData('text/plain', text.trim())
            }
        })
    },

   beforeDestroy() {
        document.removeEventListener('copy', function (e) {
            // clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的,也就是你复制或者剪切内容
            let clipboardData = e.clipboardData || window.clipboardData;
            // 如果 未复制或者未剪切,直接 return 
            if (!clipboardData) return;
            // Selection 对象 表示用户选择的文本范围或光标的当前位置。
            // 声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
            let text = window.getSelection().toString();
            if (text) {
                // 如果文本存在,首先取消默认行为
                e.preventDefault();
                // 通过调用 clipboardData 对象的 setData(format,data) 方法,设置相关文本 
                // format 一个 DOMString 类型 表示要添加到 drag object 的拖动数据的类型
                // data 一个 DOMString 表示要添加到 drag object 的数据
                clipboardData.setData('text/plain', text.trim())  在这追加信息
            }
        })
    }

?

文章来源:https://blog.csdn.net/qq_59626859/article/details/135286000
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。