js监听粘贴事件的方法

在一些交互的网页中少不了复制粘贴的事件，而下面的博文说一说关于利用js来监听页面中的粘贴事件，包括鼠标的右击粘贴以及键盘组合键ctrl+v粘贴组合键。

js监听页面粘贴事件的方法

例：

<script>
document.getElementById('dxc_pase_pase').addEventListener('paste', function (e) {
    var clipboardData = e.clipboardData;
    if (!(clipboardData && clipboardData.items)) { //剪切版中是否有内容
        return;
    }
    var content = e.clipboardData.getData('text/plain');
    console.log(content); //这里是粘贴的内容，自行可以自行处理
});
</script>

例2：

<script>
//73so.com
document.getElementById('dxc_pase_pase').addEventListener('paste', function (e) {
    var clipboardData = e.clipboardData;
    if (!(clipboardData && clipboardData.items)) {//是否有粘贴内容
        return;
    }
    for (var i = 0, len = clipboardData.items.length; i < len; i++) {
        var item = clipboardData.items[i];
        if (item.kind === "string" && item.type == "text/plain") {//判断是否为text格式
            item.getAsString(function (str) {
                console.log(str); //这输出的是txt格式的字符串
            })
        } else if (item.kind === "file") {//file 一般是各种截图base64数据(比如QQ截图)
            var pasteFile = item.getAsFile(); // pasteFile就是获取到的文件
            var reader = new FileReader();
            // data url  FileReader
            reader.readAsDataURL(pasteFile);
            reader.onload = function () {
                console.log(reader.result); //输出base64格式的图片，可以放到img 的 src 属性中去
            } 
        }
    }
})
</script>

以上就是关于页面中利用js来监听粘贴事件的方法，大家可以参考一下。