js读取剪贴板内容

最新推荐文章于 2025-06-21 10:58:13 发布

丸锃卉

最新推荐文章于 2025-06-21 10:58:13 发布

阅读量1.4w

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/MrwanZH/article/details/82965290

前端专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript在不同浏览器环境下读取和写入剪贴板内容，特别提到了在IE浏览器中有效的方法，但在Firefox和Chrome等浏览器会遇到`clipboardData is not defined`的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注：该读取剪贴板方法存在浏览器兼容问题，适用于ie，不适用于firefox、google，报错Uncaught ReferenceError: clipboardData is not defined

以下是读取剪贴板内容的js代码：

<script>
    var text = window.clipboardData.getData("Text");
	alert(text);
</script>

以下是将文本写入剪贴板的例子：

<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script	src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
</head>
<body>
    <p>哈哈
        <span id="target">你没看错，就是复制的这里</span>
	</p>
	<button class="btn" data-clipboard-action="copy"
		data-clipboard-target="#target" id="copy_btn">复制按钮</button>
</body>

<script>    
    $(document).ready(function(){
        var targetText=$("#target").text();    
        var clipboard = new Clipboard('#copy_btn');    
    
        clipboard.on('success', function(e) {    
            console.info('Action:', e.action);    
            console.info('Text:', e.text);    
            console.info('Trigger:', e.trigger);    
            alert("复制成功");    
    
            e.clearSelection();    
        });    
    });    
</script>