在html页面通过js实现复制粘贴功能

最新推荐文章于 2023-11-21 09:57:33 发布

weixin_33737774

最新推荐文章于 2023-11-21 09:57:33 发布

阅读量800

点赞数

CC 4.0 BY-SA版权

文章标签： java 前端 javascript ViewUI

原文链接：http://www.cnblogs.com/chenhaoyu/p/9247103.html

本文介绍了一种使用纯JavaScript实现的复制功能，该方法适用于表单元素，通过选择内容并执行复制命令完成复制操作。

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

前言：要实现这个功能，常用的方式大概分为两类，第一种就是上插件，这个网上有大把，第二种就是直接用几行JS来实现。

这次说第二种实现方式，这方式有很大的局限性，只能用表单元素，并且不能设置disabled属性，但是方式也是最简单的，下面直接看代码

<!DOCTYPE html>
<html>
<head>
    <title>eee</title>
</head>
<body>
<input id="test" type="text" name="" value="this is test.">

<button onclick="Copy()">点击这个按钮就会复制上面input的内容</button>
</body>
<script type="text/javascript">
    function Copy() {
        var content = document.getElementById('test');
        content.select();
        document.execCommand('Copy');
        alert('复制成功');
    }
</script>
</html>

结果如下：