js实现粘贴板功能 (实用）

最新推荐文章于 2024-04-17 08:47:34 发布

chelen_jak

最新推荐文章于 2024-04-17 08:47:34 发布

阅读量576

点赞数

分类专栏： JavaScript

原文链接：https://blog.csdn.net/qq_24184997/article/details/80769734

版权

JavaScript 专栏收录该内容

311 篇文章 3 订阅

订阅专栏

原文出处：https://blog.csdn.net/qq_24184997/article/details/80769734
第一次写博客，js实现粘贴板方式有
document.exeCommad
window.clipboardData的setData方法
还有使用ZeroClipboard插件

1：通过document提供的exeCommad方法实现粘贴板功能
优点不需要引用外部插件

google浏览器（兼容）
IE浏览器（兼容）
火狐（兼容）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" onClick='copyUrls(this)' value="方式二">

<script language="javascript">
    function copyUrls(that) {
        let textArea = document.createElement("textarea")
        textArea.style.position = 'fixed'
        textArea.style.top = 0
        textArea.style.left = 0
        textArea.style.width = '2em'
        textArea.style.height = '2em'
        textArea.style.padding = 0
        textArea.style.border = 'none'
        textArea.style.outline = 'none'
        textArea.style.boxShadow = 'none'
        textArea.style.background = 'transparent'
        textArea.value = that.value
        document.body.appendChild(textArea)
        textArea.select()
        try {
            document.execCommand('copy')
        } catch (err) {
            this.throwError('不能使用这种方法复制内容'+err.toString())
        }
        document.body.removeChild(textArea)
    }
</script>
</body>
</html>

exeCommad 还有很多方法，待续

2：window.clipboardData的setData方法

google浏览器（不兼容）
IE浏览器（兼容）
火狐（不兼容）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" onClick='copyUrl()' value="方式一">
<script language="javascript">
    function copyUrl() {
        var clipBoardContent="test";
        window.clipboardData.setData("Text",clipBoardContent);
        alert("复制成功!");
    }
</script>
</body>
</html>

3：通过插件clipboard方式实现 https://github.com/zenorocha/clipboard.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="clipboard.min.js"></script>
</head>
<body>

<input type="button" onClick='copyUrls3(this)' value="方式三" class="btn">

<script language="javascript">
    function copyUrls3(that) {
        var clipboard = new ClipboardJS('.btn', {
            text: function() {
                return that.value;
            }
        });

        clipboard.on('success', function(e) {
            console.log(e);
        });

        clipboard.on('error', function(e) {
            console.log(e);
        });
    }

</script>
</body>
</html>

google浏览器（不兼容）
IE浏览器（兼容）
火狐（不兼容）

后续加上各个版本的优缺点

chelen_jak

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现粘贴板功能 (实用）

原文出处：https://blog.csdn.net/qq_24184997/article/details/80769734第一次写博客，js实现粘贴板方式有document.exeCommadwindow.clipboardData的setData方法还有使用ZeroClipboard插件1：通过document提供的exeCommad方法实现粘贴板功能优点不需要引用外部插件g...
复制链接

扫一扫