javascript 监控粘贴事件详解

发布时间：2023-01-02 07:41:35 来源：互联网

.

如玉的白玫瑰冰雪纯洁，闪烁着月光般寒冷的色彩玫瑰乱舞，勾勒出你的身形，你的容貌。想看日出，想看日落，想看世间每一处角落。

在前端网页中向输入框粘帖内容时，是可以触发js的粘帖事件，此事件可以对粘帖的内容进行操作，具体的的使用方法可以参考下面的好代码教程。

js粘贴事件触发条件：

1、鼠标右键 -> 粘贴

2、键盘组合键：ctrl + v

js 监控粘贴事件示例

示例1：

<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>
//
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 监控粘贴事件具体示例

复制下面的代码，放到本地测试即可！

<html>
<head>
    <title>粘贴事件--</title>
</head>
<body>
<p>向下面的textarea粘帖内容，则会触发JS粘贴事件</p>
<textarea name="" id="dxc_pase_pase" cols="30" rows="10"></textarea>
<script>
    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") {
                item.getAsString(function (str) {
                    alert('我是粘贴的文字：'+str);
                })
            } else if (item.kind === "file") {
                var pasteFile = item.getAsFile();
                var reader = new FileReader();
                reader.readAsDataURL(pasteFile);
                reader.onload = function () {
                    alert('我是粘贴的图片的Base64代码：' + reader.result);
                }
            }
        }
    })
</script>
</body>
</html>

本文javascript 监控粘贴事件详解到此结束。生活的情况越艰难，我越感到自己更坚强，甚而也更聪明。小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章:

标签： JavaScript javaScript教程 JS