vue禁止粘贴/控制粘贴

最新推荐文章于 2024-09-04 10:37:31 发布

原创最新推荐文章于 2024-09-04 10:37:31 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 3 个专栏收录

29 篇文章

订阅专栏

原生js

12 篇文章

订阅专栏

Jquery

2 篇文章

订阅专栏

本文介绍了一种利用Jquery实现的跨浏览器用户粘贴控制方案，通过绑定paste事件，可在Chrome和IE上获取剪切板内容，实现对用户粘贴行为的监测与管理。

最近项目遇到了一个关于控制用户粘贴的功能，简单研究了下，提出以下方案：

使用Jquery获取的DOM对象绑定paste方法

具体如下：

1.安装jquery

npm i jquery -S

修改项目中build/webpack.base.config.js

// 顶部引入webpack
const webpack = require('webpack');

...


module.exports = {
    ...
    // 添加plugin配置
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            jquery: "jquery",
            "window.jQuery": "jquery"
        })
    ],
    module: {
        ...
    }
}

在使用jquery的页面引入jquery

import $ from 'jquery'

2.在页面添加事件绑定

mounted(){
    $(document.body).bind({paste: this.onPaste})
}
methods: {
    onPaste(e){
        // 定义变量获取剪切板文字
        let data = null;
        // 定义变量获取剪切板信息
        let clipboardData = window.clipboardData; // IE
        if (!clipboardData) { //chrome
            clipboardData = e.originalEvent.clipboardData
        }
        // 获取剪切板内容
        data = clipboardData.getData('Text');
        // 打印剪切板文字
        console.log(data)
    }
}

补充说明：当绑定事件返回false时，无法粘贴

3.移除绑定

在组件的钩子函数中移除绑定

beforeDestroy() {
    $(document.body).unbind('paste')
},

以上就是我的基本设置了，之所以使用jquery，是因为在chrome中无法从window对象获取clipboardData，所以使用Jquery获取的Dom对象的originalEvent属性值获取clipboardData，以实现IE和chrome的兼容