hi,欢迎访问本站!
当前位置: 首页Web前端正文

js监听粘贴事件的方法

墨初 Web前端 778阅读

在一些交互的网页中少不了复制粘贴的事件,而下面的博文说一说关于利用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来监听粘贴事件的方法,大家可以参考一下。

声明:无特别说明,转载请标明本文来源!
相关推荐