js获取剪切板文本、图片、富文本

【03】

已于 2022-06-24 13:51:44 修改

阅读量1.1k

点赞数 2

分类专栏： javascript 笔记

于 2021-05-15 13:29:08 首次发布

本文链接：https://blog.csdn.net/weixin_43840202/article/details/116846080

版权

javascript

笔记同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

javascript

34 篇文章 1 订阅

订阅专栏

效果图

代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>web03.cn</title>
    <style>
        .box {
            padding: 20px;
            border: 1px solid #ccc;
            margin: 20px;
        }

        img {
            max-height: 200px;
        }
    </style>
</head>
<body>
<div class="box">
    <input type="text" id="parseTxt" placeholder="粘贴文本">
    <p id="textView"></p>
</div>
<div class="box">
    <input type="text" id="parseImg" placeholder="粘贴图片">
    <br>
    <img src="" id="imgView"/>
</div>
<div class="box">
    <input type="text" id="parseRichText" placeholder="粘贴富文本">
    <p id="richTextView"></p>
</div>

<hr>
<div><span style="color: #ff0000">零三的笔记：</span><a href="https://web03.cn">https://web03.cn</a></div>
</body>

<script>
    document.getElementById("parseTxt").addEventListener("paste", function (event) {
        const clipboardData = event.clipboardData || event.originalEvent.clipboardData
        // let text = clipboardData.getData('')
        const items = clipboardData.items;
        if (items.length > 0 && items[0].kind === "string") {
            items[0].getAsString(function (e) {
                document.getElementById("textView").innerText = e
            })
        } else {
            alert("剪切板没内容")
        }
    })
    document.getElementById("parseImg").addEventListener("paste", function (event) {
        const clipboardData = event.clipboardData || event.originalEvent.clipboardData
        const items = clipboardData.items;
        console.log(items[0])
        if (items.length > 0 && items[0].kind === "file") {
            let blob = items[0].getAsFile()
            let reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onload = function (e) {
                console.log(e)
                document.getElementById("imgView").src = e.target.result
            };
        } else {
            alert("剪切板没图片内容")
        }
    })
    document.getElementById("parseRichText").addEventListener("paste", function (event) {
        const clipboardData = event.clipboardData || event.originalEvent.clipboardData
        const items = clipboardData.items;
        if (items.length > 0 && items[1].kind === "string") {
            items[1].getAsString(function (e) {
                document.getElementById("richTextView").innerHTML = e
            })
        } else {
            alert("剪切板没内容")
        }
    })
</script>
</html>

demo： https://yuan30-1304488464.cos.ap-guangzhou.myqcloud.com/blog/demo/%E8%8E%B7%E5%8F%96%E5%89%AA%E5%88%87%E6%9D%BF%E5%86%85%E5%AE%B9.html

【03】

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js获取剪切板文本、图片、富文本

效果图代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <me
复制链接

扫一扫

专栏目录