js 文本框监听粘贴事件，获取粘贴板上的图片数据

最新推荐文章于 2025-03-02 20:29:41 发布

原创最新推荐文章于 2025-03-02 20:29:41 发布 · 1.8w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

学习分享专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个简单的HTML页面示例，该页面通过JavaScript监听输入框的粘贴操作，并根据不同类型的数据（如字符串或文件）输出相应的信息到浏览器的控制台。此功能可用于验证用户输入或进行数据预览。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="myInput" />
<script>
    document.getElementById('myInput').addEventListener('paste',function(e){
        if ( !(e.clipboardData && e.clipboardData.items) ) {
            return;
        }
        for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
            var item = e.clipboardData.items[i];

            if (item.kind === "string") {
                item.getAsString(function (str) {
                    console.log(str);
                })
            } else if (item.kind === "file") {
                var f= item.getAsFile();
                console.log(f);
            }
        }
    });
</script>
</body>
</html>